Fire AngularJS directive on view load

Question

I have a rather simple app. In this case, the user click a button on home.html to go to map.html. On map.html, a jQuery plugin (made into a directive) should fire when that view loads. Currently it does not. It fire immediately when the app loads (home.html) even though the directive is not called until the user reaches map.html.

I also tried using Angular UI.Utils (jQuery Passthrough) but to no avail.

Here's my directive:

directive('tfinderMap', function() {
    return {
       restrict: 'A',
       link: function(scope, element, attrs) {
           $(element).tfindermap(scope.$eval(attrs.tfinderMap));
       }
   };
});

jQuery plugin would simply be $(element).tfinderMap({queryLimit: 3}) and that plugin can be found here - it's a Google Map API plugin I created.

My controller is empty at this point...

.controller('MapCtrl', [function() {
}])

My map.html view is basic as well...

<div ng-controller="MapCtrl">
    <div id="map" class="google-map-canvas" tfinder-map="{queryLimit: 3}"></div>

    <ul class="table-view" id="location-data">
        <!--plugin results get put into here-->
    </ul>

</div>

And my index.html loads all my scripts (Angular files & plugin code) and you can click on the nav item to go to map.html which is routed via $routeProvider (project was started with angular-seed, FYI)

I looked at this question but I don't think the answers provided pertain to my issue.

So is there a way to just reload the entire page when I navigate to map.html, so then my directive will fire because the scripts will be reloading as well? Or is there a way to re-initialize the map.html view and scripts (or directive)?

As I mentioned above, I've tried using jQuery Passthrough as well as a $scope.reload() with no luck...

Lastly I'll mention if I do a manual browser refresh, my directive fires just fine!

ms87 · Accepted Answer · 2014-04-26 16:23:37Z

1

Try firing the directive once the tfinderMap attribute is assigned:

attrs.$observe("tfinderMap",function(value){
 if(value){
   $(element).tfindermap(scope.$eval(attrs.tfinderMap));
 }
})

or alternatively a timeout with no wait:

$timeout(function(){
        $(element).tfindermap(scope.$eval(attrs.tfinderMap));
});

answered Apr 26, 2014 at 16:23

ms87

17.5k23 gold badges89 silver badges123 bronze badges

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

1 Comment

james Over a year ago

Yes! Thank you very much! This has been driving me insane. I ended up using the first example you provided. But I also tested the second and it worked too.

Collectives™ on Stack Overflow

Fire AngularJS directive on view load

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related