未处理角度指令

Angular directive not being processed

本文关键字：指令 未处理      更新时间：2023-09-26

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

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

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

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

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

我认为这是一个超级简单的设置，没有任何异国情调的结构。。。所以我可能错过了什么。但是什么？

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

如果不使用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

相关文章：