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!

Answer 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));
});