如何在AngularJs中的Directives中使用$ location

时间:2013-09-28 12:01:53

标签: javascript angularjs

我正在创建一个指令,其中onclick将用户带到另一个页面。有点像定制的“href”标签。我希望$ location会处理重定向功能,但由于我不知道的原因,这不起作用。如果我在控制器中使用$ location它可以工作,但是从指令中,它没有。这是代码:

angular.module("myAPP")
    .directive('hpHref', ['$location' , function($location){
        return {
            restrict : "A",
            link : function(scope, el, attr) {
                    el.bind('click', function(){
                        // more logic
                        console.log("Code reaches here:");
                        $location.path("/" + attr.hpHref);
                    });
            }
        }
    }]);

还尝试将控制器作为指令的一部分。即。

angular.module("myApp")
    .directive('hpHref', function(){
        return {
            restrict : "A",
            scope: {},
            controller : ['$scope', '$location', function($scope, $location){
                $scope.goToUrl = function (url) {
                    // some more logic
                    console.log("Code reaches here");
                    $location.path(url);
                };
            }],
            link : function(scope, el, attr) {
                    el.bind('click', function(){
                        scope.goToUrl(attr.hpHref); 
                    });
            }
        }
    });

这也行不通。问题是什么?如何在指令中使用$ location?

1 个答案:

答案 0 :(得分:6)

因此,根据上面的评论,只要你在Angular自己的事件处理程序(ng-click等)之外调用Angular,就必须调用$scope.$apply()。 JQuery事件是人们忘记调用$apply()的最常见情况。