javascript - Cum să folosești $location în Directives în AngularJs

Creez o directivă în care, la onclick, utilizatorul este dus către o altă pagină. În oarecare măsură, ca un tag "href" personalizat. Speram că $location se va ocupa de funcția de redirecționare, dar din motive pe care nu le cunosc încă, acest lucru nu funcționează. Dacă folosesc $location într-un controller, funcționează, dar din interiorul unei Directive, nu. Iată codul:

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

De asemenea, am încercat să am un controler ca parte a Directivei, adică

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

Și aceasta nu funcționează. Care este problema? Și cum poate fi folosit $location în cadrul Directivelor?

Răspuns #1

Deci, conform comentariului de mai sus, orice dată când apelezi Angular în afara propriilor manipulatoare de evenimente ale Angular (ng-click etc.), trebuie să apelezi $scope.$apply(). Evenimentele JQuery sunt cel mai frecvent caz în care oamenii uită să apeleze $apply().