Question

我有一套相当简单的指令，一个是父母，另一个是孩子。一个简单的＆＃34;列表和列表项＆＃34;有点集。但是，孩子一个人没有被使用。完全没有。它的链接功能甚至不被调用。

您会在HTML中看到0弹出，它反映了正在处理的子项目数，并添加到父控制器中。应该有2。

我尝试将链接函数重写为返回链接函数的编译函数。编译函数确实被调用，但链接函数仍然没有。我曾尝试使用和不使用replace: true（但老实说，我需要DOM清洁，所以我会留下它）。我尝试过与transclude: true的组合（因为嘿，你得尝试一下）。这些都不会触发链接功能甚至被调用，更不用说做我需要做的事了。

子指令没有模板。我知道这个。这是故意的。它不需要模板，因为它不会渲染任何东西。相应的元素只是数据。父指令将适当地呈现它们，这就是父指令确实有模板的原因。

我认为这是一个超级简单的设置，没有任何异国情调的构造......所以我可能会遗漏一些东西。但是什么？

Answer 1

如果不使用ng-transclude告诉角度包装现有内容的位置，您将使用新模板有效地消除子元素。因为它们已经消失，这就解释了为什么你的链接功能没有解雇。

以下修改使其有效但我确定您要更改模板

app.
  directive("swSystemsLinks", function() {
    return {
      restrict: "E",
      scope: { },
      replace: true,
      transclude:true,// let angular know to transclude content
      controller: [ "$scope", function($scope) {
        $scope.links = [ ];

        this.addLink = function(name, url, icon) {               
          $scope.links.push({
            name: name || "",
            url: url || "",
            icon: icon
          });
        };
      }],
      /* use `ng-transclude` to point out where to wrap content into template */
      template: "<div>{{ links.length }}<div ng-transclude></div></div>"
    };
  });

的 DEMO

Answer 2

您正在替换您的孩子。我知道这听起来非常引人注目，但这是真的。您可以将transclude：true添加到父指令中，以便将子项放入dom中。此外，您还可以在模板中的元素中添加ng-transclude，以说明子元素的放置位置。只有在父指令上有模板时才需要这样做。

我更新了小提琴：http://jsfiddle.net/pe2engcw/2/

app.
  directive("swSystemsLinks", function() {
    return {
      restrict: "E",
      scope: { },      
      transclude: true,
      controller: [ "$scope", function($scope) {
        $scope.links = [ ];

        this.addLink = function(name, url, icon) {
          $scope.links.push({
            name: name || "",
            url: url || "",
            icon: icon
          });
        };
      }],
      template: "<div>{{ links.length }}<div ng-transclude></div></div>"
    };
  }).

Angular指令未被处理

2 个答案: