AngularJS directive only called once?

Question

I'm trying to shove mixitup inside my angular page and in order to do so I made a directive module for it

angular.module('MainCtrl', [])
    .controller('MainController', function($scope) {
        $scope.tagline = 'To the moon and back!';   
    })
    .directive('mixitContainer', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                $(element).mixItUp(scope.$eval(attrs.mixitContainer));
            }
        };
    });

Don't worry about the simplicity of the main controller, it is simply a test.

Now, the issue is that the directive only get's called once! If I go to another page and ask angular to load another controller and then go back to the home page and ask angular to load MainCtrl again, the directive isn't loaded!

Heres the with the directive:

<div id="Container" class="mixit-container" mixit-container="{load: {sort: 'order:asc'}, controls: {toggleFilterButtons: true, toggleLogic: 'and'}}">

Anyone got any ideas?

Do you mean that the directive is not compiled? (using $compile service) — Khanh TO
– Khanh TO, Commented Jun 21, 2014 at 14:47
I assume that angular loads the controller for the corresponding page each time I route to it? Or is this not the case? — Bjørn Zeiler
– Bjørn Zeiler, Commented Jun 22, 2014 at 11:39

Chad Robinson · Accepted Answer · 2014-07-20 15:50:23Z

AngularJS doesn't include routing facilities. Those are provided either by ngRoute (a core but optional module), ui-router (ngRoute made super-awesome-amazing), or another replacement. You don't say which you use, and each has different behaviors.

Whichever it is, this is going to come down to the router, not the directive. The directive will get called whenever necessary. It doesn't control that itself - 'necessary' means Angular is compiling a portion of the DOM, usually from a template file, and has run into the directive. It will call the directive and ask it "what now?"

The above-named routers have different behaviors, both from each other and also based on how you configure them internally. In all of them you can arrange things so that templates do, or do not, get re-rendered. For example, in ui-router you can have 'child' states. If you have a child state active, the parent is also active... so going from the child to the parent will not re-render a template because it was already done earlier. And to make matters more complex, you can even override this by hooking the $stateChangeStart event and force the router to redraw that view even if it didn't think it needed to.

All this means... set your attention to your directive aside. It will do what you want as soon as the higher level does what you want. Get your router behaving the way you expect and you will be happy!

Collectives™ on Stack Overflow

AngularJS directive only called once?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related