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函数。所以这个控制器不知道链接到模板。

我做错了什么？

Answer 1

您不需要replace: true（这就是破坏您的功能），如果您愿意，可以使用transclude:true。替换被删除。

来自改变 -

用于定义替换元素的指令的替换标志它们将在下一个主要角度版本中删除。这个功能具有困难的语义（例如，如何合并属性）和与解决的问题相比，会带来更多问题。还有，用 WebComponents在DOM中拥有自定义元素是正常的。

AFAIK它没有被删除，但已知的错误没有修复，如果您对此感兴趣，可以在这里查看该主题。 https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb#commitcomment-8124407

Answer 2

$root.collection.tags应该只是tags，因为模板的范围已经是指令的$scope。

无法从指令模板访问范围

2 个答案: