Javascript 动态元素未在AngularJS上调用指令方法

我使用这个指令的目的是创建一个selectall指令，它可以附加到任何类型的html元素上，以便重用

咖啡脚本：

App.directive "selectAll", [ ->
  restrict: 'A',
  replace : true,
  scope: {
    attribute: '@',
    collection: '='
  },  
  link: (scope, element, attrs, model) ->
    scope.selected = false

    element.attr 'ng-click', 'toggle_selection()'
    element.html "<i class='icon-check icon-white''></i>Select All"

    scope.toggle_selection = () ->
      scope.selected = !scope.selected
      collection.forEach (item) ->
        item[attribute] = scope.selected
      scope.toggle_content()

    scope.toggle_content = () ->
      element.html("<i class='icon-check icon-white'></i>Select All") unless scope.selected
      element.html("<i class='icon-check-empty icon-white'></i>Unselect All") if scope.selected
]

App.directive("selectAll", [
    function() {
      return {
        restrict: 'A',
        replace: true,
        scope: {
          attribute: '@',
          collection: '='
        },
        link: function(scope, element, attrs, model) {
          scope.selected = false;
          element.attr('ng-click', 'toggle_selection()');
          element.html("<i class='icon-check icon-white''></i>Select All");
          scope.toggle_selection = function() {
            scope.selected = !scope.selected;
            collection.forEach(function(item) {
              return item[attribute] = scope.selected;
            });
            return scope.toggle_content();
          };
          return scope.toggle_content = function() {
            if (!scope.selected) {
              element.html("<i class='icon-check icon-white'></i>Select All");
            }
            if (scope.selected) {
              return element.html("<i class='icon-check-empty icon-white'></i>Unselect All");
            }
          };
        }
      };
    }
  ]);

App.directive“selectAll”，[->
限制：“A”，
替换：正确，
范围：{
属性：'@'，
集合：'='
},  
链接：（范围、元素、属性、模型）->
scope.selected=false
element.attr'ng click'，'toggle_selection（）'
element.html“全选”）；
scope.toggle_selection=函数（）{
scope.selected=！scope.selected；
collection.forEach（函数（项）{
返回项[属性]=范围。已选择；
});
返回范围。切换内容（）；
};
return scope.toggle_content=function（）{
如果（！scope.selected）{
html（“全选”）；
}
如果（选择范围）{
return element.html（“取消全部选择”）；
}
};
}
};
}
]);

问题是没有调用toggle_selection函数。我试图对动态创建的元素调用

$compile

，但它引发了一个异常，表示未定义compile

另外，如果你有更好的方法来做我正在做的事情，请分享最佳实践，因为我使用Angular不到一周

---

谢谢大家!

我没有发现原因，所以我改变了方法，使用@Chandermanji推荐的模板atribute

App.directive "selectall", [ ->
  restrict: 'E',
  replace : true,
  scope: {
    attribute: '@',
    collection: '='
  },
  template: '<div class="btn btn-large btn-inverse" ng-click="toggle_selection(collection, attribute)">' +
      '<i class="icon-check icon-white"></i>Select All' +
    '</div>',
  link: (scope, element, attrs, model) ->
    scope.selected = false

    scope.toggle_selection = (collection, attribute) ->
      scope.selected = !scope.selected
      scope.collection.forEach (item) ->
        item[attribute] = scope.selected
      scope.toggle_content()

    scope.toggle_content = () ->
      element.html("<i class='icon-check icon-white'></i>Select All") unless scope.selected
      element.html("<i class='icon-check-empty icon-white'></i>Unselect All") if scope.selected
]

App.directive“selectall”，[->
限制：'E'，
替换：正确，
范围：{
属性：'@'，
集合：'='
},
模板：“”+
“全选”+
'',
链接：（范围、元素、属性、模型）->
scope.selected=false
scope.toggle_selection=（集合，属性）->
scope.selected=！scope.selected
scope.collection.forEach（项目）->
项[属性]=范围。已选定
scope.toggle_content（）
scope.toggle_content=（）->
html（“全选”），除非选择了scope.html
如果选择了scope.html，则返回element.html（“取消全部选择”）
]

查看指令文档的

模板

属性。您正在做的事情可以在指令模板中完成。指令模板可以包含绑定表达式，该表达式可以基于状态（$scope）显示\隐藏和更改类。