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编译/链接过程之外做任何特殊操作。

Answer 2

没有Angular的编译步骤，浏览器无法解释Angular指令的行为。我建议你使用ng-template和$ compile服务，然后将这些编译后的元素附加到DOM

如何在Angular中呈现页面后，将指令作为属性添加到页面中？

2 个答案: