在组件本身之外渲染组件的一部分答案

【问题标题】：Rendering part of component outside of the component itself在组件本身之外渲染组件的一部分
【发布时间】：2017-04-27 05:18:07
【问题描述】：

我有这样的 JSFiddle： https://jsfiddle.net/ownvjjow/

基本上问题是我想在元素(x) 本身之外渲染组件x 的某些部分。就像在外部范围中一样，但在其他组件中保留了它的范围（y）。我有部分组件可能希望使用targetElement 设置呈现，但似乎ng-repeat 有一些问题。小提琴返回一些其他错误，我在我的应用程序中得到的错误是：我可以适当地打破我想要作为另一个组件“移动”的部分，然后有条件地在其他地方渲染它，提供bindings: {... , controller: '<'} 然后将范围从组件x 暴露到x.y 但我想知道是否有编译这部分组件 x 并将其注入其他地方的选项，一切正常。

我不确定我的方法是否正确，或者我应该考虑一些不同的东西，如果您知道任何其他解决方案/想法，那么如果您让我知道，我将不胜感激。

【问题讨论】：

如果你有相同的数据来源......外部组件可以独立于第一个组件生成它们的数据。尝试隔离该组件。
不确定我是否理解你的意思，我知道组件应该相互隔离，但我需要在组件之外的地方显示组件的一部分（在元素中）在targetElement 中指定）。我不确定这是否是实现这一目标的最佳方式，但我没有看到其他方法可以做到这一点并保持灵活性。

标签： javascript angularjs angularjs-directive angularjs-scope angular-components

【解决方案1】：

fiddle

if(this.options.targetElement) {
  var parentElem = angular.element((this.options.targetElement));
  var childElem = $compile(this.container)($scope)[0];
  $timeout( function(){
        parentElem.append(childElem);
  }, 0, false );
  }

这将使 AngularJS 有时间完成其编译。

希望对您有所帮助。

【讨论】：

酷，完全忘记了$compile 是异步的。完美的答案，谢谢！