未处理 Angular 指令

Question

我有一组相当简单的指令，一个是父级，另一个是子级。一个简单的“列表和列表项”类型的集合。但是，孩子没有被使用。完全没有。它的链接函数甚至没有被调用。

这是一个小提琴： http://jsfiddle.net/pe2engcw/

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

我尝试将链接函数重写为返回链接函数的编译函数。编译函数确实被调用，但链接函数仍然没有。我试过有无replace: true（但老实说，我需要干净的DOM，所以我要把它留在里面）。我已经尝试过与transclude: true 的组合（因为嘿，你必须尝试一下）。这些都不会触发链接函数甚至被调用，更不用说做我需要它做的事情了。

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

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

Answer 1

你正在替换你的孩子。我知道这听起来很戏剧化，但这是真的。您可以将 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>"
    };
  }).

Answer 2

如果不使用 ng-transclude 告诉 Angular 将现有内容包装在哪里，您将使用新模板有效地清除子元素。既然它们消失了，这就解释了为什么您的链接功能没有触发。

以下修改使它可以工作，尽管我确信你会想要更改模板

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