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

Question

I have an html like this

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

Also i have an attribute type directive that adds some feature to the tag (lets call it myFeature attribute).

In myCustomTag directive i want to add myFeature attribure to all children nodes. I need to wait page to be rendered first in order to get children tags of myCustomTag (because of ngRepeat) as follows:

    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','');
                    }
                });
            }
        };
    }); 

The problem is my feature directive is not applied to child nodes. Actually it is added as attribute but noting more. I think it is not working since i add attribute after evaluation of the tag by angular, but also i think there should be a way to do this. Any idea?

Answer 1

If you plan on modifying your directive's children, then the perfect place to do this is in your compile function :

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','');
              }
        }
    };
}); 

When Angular walks the DOM tree, the children of your directive have not been compiled (or linked) yet. By modifying the DOM here, you don't have to worry about doing anything special outside of the Angular compile/link process.

Answer 2

Angular directives' behavior cannot be interpreted by the browser without Angular's compile step. I would suggest you use ng-template with the $compile service and then append these compiled elements to the DOM