无法从指令模板中访问作用域。

Question

指令：

angular.module('myApp')
  .directive('rankingTags', function() {
    return {
      restrict: 'E',
      scope: {},
      controller: function($scope) {
        $scope.updateTagList = function(tag) {
          console.log('updateTagList function called') // never logged
        };
      },

      templateUrl: '/app/common/directives/tags.tpl.html',
      replace: true
    };
  });

指令的模板：

<div class="tag" ng-repeat="tag in $root.collection.tags track by $index">
  <input ng-click="updateTagList(tag)" type="checkbox" />
  <label>{{tag.name}}</label>
</div>

从另一个模板调用指令：

<ranking-tags></ranking-tags>

我无法从指令模板中访问 updateTagList 函数。因此，这个控制器与模板没有链接起来。请问我做错了什么？

- Michael

---

为什么'NodeJs'要用引号括起来？不能进行双向绑定到一个字符串。意图是什么？此外，当标签集合已经传递到指令中时，为什么repeat还要寻找$root？ - charlietfl

@charlietfl 指令传递的 tags 列表为空。updateTagList 函数会更新它，然后您可以在页面控制器中使用 $watch 捕获更改。另一方面，$root.collection.tags（$rootScope 值）具有标签列表。 - Michael

@charlietfl，请查看更新。 - Michael

停止更改代码。这只会在问题初始起点添加混乱。从隔离作用域对象中删除范围项不会解决您的问题...除非您完全摆脱隔离作用域，否则它会使问题变得更糟。 - charlietfl

代码中没有任何理由表明updateTagList不可用。如果您需要进一步的帮助，请提供一个MCVE。把这些内容放到plunker中展示给我们看有多难？ - charlietfl

Answer 1

你不需要使用replace:true（它会破坏你的函数），相反，您可以使用transclude:true（如果您喜欢）。Replace已废弃。

从更改中 - 定义指令的替换标志将在下一个重要的angular版本中被删除。此功能具有困难的语义（例如如何合并属性），并且与解决的问题相比导致更多问题。而且，随着WebComponents，将在DOM中有自定义元素是正常的。

据我所知，它尚未被删除，但已知的错误没有修复，如果您进一步感兴趣，可以在此处查看线程。 https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb#commitcomment-8124407

- ajmajmajma

Answer 2

$root.collection.tags 应该简单地改为 tags，因为模板的作用域已经是指令的 $scope。

- Joseph

---

$root.collection.tags 来自于 $rootScope。 - Michael