AngularJS：如何正确transclude定制指令子元素？(AngularJS : How t

下面是一些代码：链接

我试图创建一个包装它的孩子们在一些样板一个指令。但是，如果孩子们ng-if控制它们的外观，在“transclusion”不工作。那么它像是做，但你可以看到ng-if逻辑是没有得到通过正确地传递。

我想知道如何解决它，又哪里（如果任何地方），这在角文档描述。

Answer 1:

问题是，最初角代替ngIf与它用于跟踪放置位置条件代码中的注释。这是最容易看到的例子。

您的HTML：

<div control-group>
  <label>Test</label>
  <input type="text" ng-model="editing.name" />
  <span class="text-error" ng-if="editing.name.length != 3"> Name must be 3 characters </span>
</div>

看起来这是你的transclude功能的内部cloned变量（ transclude(function (cloned) { ）：

<div control-group>
  <label>Test</label>
  <input type="text" ng-model="editing.name" class="ng-valid ng-dirty">
  <!-- ngIf: editing.name.length != 3 -->
</div>

所以，用类元素text-error ，你上（如下图）过滤不是cloned 。就在评论是存在的。

var inputsAndMessages = cloned.filter('input, button, select, .text-error');

既然你只transcluding符合上述过滤器的元素ngIf注释丢失。

该解决方案是过滤征求意见，以及在你的追加添加它们（所以角保持它的参考点到ngIf ）。做到这一点的一种方式是与此替换上述（使用的事实，HTML注释是节点类型8）

var messages = cloned.filter(function(){ return this.nodeType == 8; }); //comments

var inputs = cloned.filter('input, button, select')

var inputsAndMessages = inputs.add(messages);

工作plunker

Answer 2:

你需要告诉该指令在何处放置子元素与ng-transclude指令：（ plnkr ）

 template: "<div class='control-group' ng-transclude>" +
                 "<label class='control-label' for=''></label>" +
                 "<div class='controls'></div>" +
              "</div>",

从文档：