javascript - 在 Angular 中渲染页面后，如何将指令作为属性添加到页面？

Question

我有一个像这样的html

    <myCustomTag>           
        <img ng-repeat="i in [1,2,3,4,5]" ng-src="./resource/image/ball/ball_{{i}}.png">
    </myCustomTag>

我还有一个属性类型指令，可以向标签添加一些功能(我们称之为 myFeature 属性)。

在 myCustomTag 指令中，我想将 myFeature 属性添加到所有子节点。我需要先等待页面渲染才能获取 myCustomTag 的子标签(因为 ngRepeat)，如下所示:

    app.directive('my-custom-tag', function(){
        return {
            restrict: 'E',
            link: function(scope, element, attributes) {
                element.ready(function(){
                    var nodes = element.children();
                    for(var i=0; i<nodes.length; ++i){
                        angular.element(nodes[i]).attr('my-feature','');
                    }
                });
            }
        };
    }); 

问题是我的功能指令未应用于子节点。实际上它是作为属性添加的，但要注意更多。我认为它不起作用，因为我在按 Angular 评估标签后添加属性，但我也认为应该有一种方法可以做到这一点。有什么想法吗？

Answer 1

如果您打算修改指令的子指令，那么执行此操作的最佳位置是在编译函数中:

app.directive('my-custom-tag', function(){
    return {
        restrict: 'E',
        compile: function(element, attributes) {
              var nodes = element.children();
              for(var i=0; i<nodes.length; ++i){
                  angular.element(nodes[i]).attr('my-feature','');
              }
        }
    };
}); 

当 Angular 遍历 DOM 树时，指令的子项尚未编译(或链接)。通过在此处修改 DOM，您不必担心在 Angular 编译/链接过程之外执行任何特殊操作。