Question

我有一个相当简单的应用程序。在这种情况下，用户点击home.html上的按钮即可转到map.html。在map.html上，当该视图加载时，应该触发jQuery插件（制作成指令）。目前它没有。它会在应用程序加载（home.html）时立即触发，即使在用户到达map.html之前未调用该指令。

我也尝试使用Angular UI.Utils (jQuery Passthrough)，但无济于事。

这是指令：

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

jQuery插件只是$(element).tfinderMap({queryLimit: 3})，可以找到该插件here - 它是我创建的Google Map API插件。

我的控制器此时为空......

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

我的 map.html视图也是基本的......

<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>

我的 index.html 加载了我的所有脚本（Angular文件和插件代码），您可以点击导航项转到map.html，它通过$routeProvider路由（项目以angular-seed，FYI开始）

我看了this question，但我不认为所提供的答案与我的问题有关。

当我导航到map.html时，有没有办法重新加载整个页面，那么我的指令将会触发，因为脚本也会重新加载？或者有没有办法重新初始化map.html视图和脚本（或指令）？

正如我上面提到的，我尝试过使用jQuery Passthrough以及$scope.reload()而没有运气......

最后我提到如果我手动浏览器刷新，我的指令就好了！

Answer 1

在分配tfinderMap属性后尝试触发指令：

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

或者是没有等待的超时：

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

关于视图加载的Fire AngularJS指令

1 个答案: