How to add directive as attribute to page after page is rendered in 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?

did you try to re-"compile" the dom after adding your attributes? — javaCity
– javaCity, Commented Jun 20, 2014 at 22:17
How can i recompile? Did you mean something other then @pixelbits answer? — ayortanli
– ayortanli, Commented Jun 21, 2014 at 9:46

Michael Kang · Accepted Answer · 2014-06-21 00:18:42Z

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.

edited Jun 21, 2014 at 0:18

answered Jun 20, 2014 at 22:55

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eric Brown Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post.

Michael Kang Over a year ago

I disagree. I am sure that if the op decides to take my advice, he will find this very helpful

Eric Brown Over a year ago

When I saw it in the Low Quality Queue, it didn't have the code sample. Your edit makes it's a perfectly good answer, and I'd retract my vote if I knew how.

Michael Kang Over a year ago

I understand it might be an automated flagging. I think though that this is one of those answers where the OP could apply easily and quickly and find the answer is correct. Plus I was on a mobile phone when I made it. I think my edited response is more thorough.

ayortanli Over a year ago

This is the answer i am looking for. I should read more about angular. Thanks lot... (I can't vote up because of low reputation :))

koolunix · Accepted Answer · 2014-06-21 04:52:45Z

0

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

edited Jun 21, 2014 at 4:52

answered Jun 20, 2014 at 22:21

koolunix

1,99516 silver badges25 bronze badges

1 Comment

Index Over a year ago

While it's true that they can't be added dynamically (or at least, not directly), I disagree in saying that they are not attributes. Most standard Angular Directives can be used as attributes.

Collectives™ on Stack Overflow

How to add directive as attribute to page after page is rendered in Angular?

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related