Angular JS directive loading explained

Question

I'm looking to understand the expected behavior of angular directives when a page is loaded once then returned to using routing. If I have a the directive below on a page, the debugger line is reached when the page is first loaded. When I navigate away from that page to another page with a different controller, then return to the original page with the directive, the directive doesn't load. Is that the expected behavior when dealing with different controllers? Or should the directive link be called every time the page is loaded regardless?

app.directive('directive1', function () {
return {
    restrict: 'E',
    replace: true,
    template: '<div></div>',
    link: function (scope, element, attr) {
        debugger;
        console.log('directive loaded');
    }
   }
});

It's on the page like this

<directive1 id="mydirective" style="height:100%;"></directive1>

The flow is like this

pg1.htm(directive)/controller1 --> pg2.htm/controller2 --> back to pg1.htm(directive)/controller1

Siraj · Accepted Answer · 2014-09-20 23:39:20Z

1

Since this is SPA, you are moving inside the AngularJS App, the directive is not loaded everytime. But once you refresh the page it will be loaded.

answered Sep 20, 2014 at 23:39

Siraj

6874 silver badges7 bronze badges

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

1 Comment

Heinrich Over a year ago

Does that mean you shouldn't instantiate objects in the directive that the page controller relies on? That's what I'm doing and it's not working. Also, you mention refreshing the page, do you mean manually by the user or from the controller?

Collectives™ on Stack Overflow

Angular JS directive loading explained

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related