Using $location.url() inside a directive not working in angularjs

Question

I have a directive and inside it, I used the $location.url() but it seems not working, and I think I need to inject something on my app but I don't know where to inject it. By the way I'm new to angularJS. Here's my code:

app.controller('CVSRRC-CTRL', function($scope,$http,$location){

        // some codes here

});
app.directive('cvsrrc', [function(){
return {
    restrict: 'A',
    link: function(scope, element, attrs){
        element.bind('dblclick', function(){
            $location.url("admin");
        });
      }
    }
}]);

It doesn't work, but I tried to replace the $location.url("admin"); to alert(1) It works properly. And when I checked the console it says that $location is undefined. What should I do ?

Why not use the ng-dblclick directive? See AngularJS ng-dblclick Directive API Reference. — georgeawg
– georgeawg, Commented Jan 30, 2017 at 2:43

Glorfindel · Accepted Answer · 2019-10-09 15:23:13Z

When an event comes from outside the AngularJS framework, the framework needs to have a digest cycle initiated with $apply.

app.controller('CVSRRC-CTRL', function($scope,$http,$location){
    // some codes here
});
app.directive('cvsrrc', ['$location', function($location){
return {
    restrict: 'A',
    link: function(scope, element, attrs){
        element.bind('dblclick', function(){
            $location.url("admin");
            scope.$apply();
        });
      }
    }
}]);

Using $location outside of the scope life-cycle

$location knows about AngularJS's scope life-cycle. When a URL changes in the browser it updates the $location and calls $apply so that all $watchers / $observers are notified. When you change the $location inside the $digest phase everything is ok; $location will propagate this change into browser and will notify all the $watchers / $observers. When you want to change the $location from outside AngularJS (for example, through a DOM Event or during testing) - you must call $apply to propagate the changes.

-- AngularJS Developer Guide - Using $location Outside Scope Life-Cycle

Brian · Accepted Answer · 2017-01-30 04:08:09Z

0

You need to inject $location as a dependency and you need to call $apply so that angular will trigger a digest cycle:

angular.module('myapp', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider){
  $routeProvider
    .when("/", {
        template: '<div cvsrrc class="box">  </div>'       
    })
    .when("/admin", {
        template : "ADMIN"
    })
  }])
  .directive('cvsrrc',  ['$location', function($location){
    return {
       restrict: 'A',
        link: function(scope, element, attrs){
            element.bind('dblclick', function(){
              scope.$apply(function(){
                $location.path("/admin");
              });
            });
          }
        }
  }]);

.box{
  height:100px; 
  width:100px; 
  background:#ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<div ng-app="myapp">
  <ng-view>
    
  </ng-view>
</div>

edited Jan 30, 2017 at 4:08

answered Jan 30, 2017 at 3:05

Brian

2,9721 gold badge19 silver badges19 bronze badges

2 Comments

Trish Siquian Over a year ago

thanks for your answer! But it is still not working for me. <img src=".." cvsrrc />

Brian Over a year ago

Missed that the location update was happening out of digest cycle, in addition to $location not being injected - @georgeawg's answer has excellent info. My answer has been updated with a simple functional example of routes being defined, and the directive working with them :)

Collectives™ on Stack Overflow

Using $location.url() inside a directive not working in angularjs

2 Answers 2

Using `$location` outside of the scope life-cycle

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using $location outside of the scope life-cycle

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Using `$location` outside of the scope life-cycle