javascript - Hur man använder $location i direktiv i AngularJs

Jag skapar en direktiv där onclick tar användaren till en annan sida. Något liknande en anpassad "href"-tagg. Jag hoppades att $location skulle ta hand om omdirigeringsfunktionen men av okända skäl fungerar detta inte än. Om jag använder $location i en controller fungerar det, men från ett Directiv gör det inte det. Här är koden:

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

Försökte också ha en kontroller som en del av Direktivet. dvs.

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

Detta fungerar inte heller. Vad är problemet? Och hur kan $location användas inom Direktiven?

Svar #1

Så, enligt kommentaren ovan, varje gång du anropar Angular utanför Angulans egna händelsehanterare (ng-click etc), måste du anropa $scope.$apply(). jQuery-händelser är det vanligaste fallet där folk glömmer att anropa $apply().