1

这是一些代码：链接

我正在尝试创建一个指令，将其子项包装在一些样板文件中。但如果孩子们ng-if控制了自己的外表，“嵌入”就不起作用了。好吧，确实如此，但是正如您所看到的，ng-if逻辑没有正确通过。

我想知道如何修复它，但也想知道 Angular 文档中描述的位置（如果有的话）。

4

2 回答 2

2

您需要使用指令告诉指令将子元素放置在何处ng-transclude：（plnkr）

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

从文档：

为使用嵌入的最近父指令的嵌入 DOM 标记插入点的指令。

放置此指令的元素的任何现有内容都将在插入嵌入的内容之前被删除。

我不确定您的意图到底是什么，因为您在模板中都有 and 作为 HTML 中的子项input。label你可能想把你的放在ng-transclude别处。

于 2013-12-16T18:18:47.410 回答
2

问题是 Angular 最初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');

由于您仅包含与上述过滤器匹配的元素，因此ngIf注释会丢失。

解决方案是过滤评论并将它们添加到您的附加中（因此 Angular 维护它的引用点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);

工作的笨蛋

于 2013-12-16T22:47:30.193 回答