CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Johan Alkstål
Johan Alkstål

Reputation: 5347

scope.$watch in directive link function not getting called

I have this factory,

.factory('authentication', [function() {

    return {
      loginRequired: false
    };
  }]);

I have this controller,

.controller('TopNavCtrl', ['$scope', 'authentication', function($scope, authentication) {

  $scope.login = function() {
    authentication.loginRequired = true;
  };

}]);

and I have this link function in a directive,

link: function(scope, element, attrs) {

    scope.show = false;

    scope.$watch(authentication.loginRequired, function(value) {
      scope.show = value;
    });
  }

When authentication.loginRequired = true; is done in the controller, the scope.$watch in the directive isn't called.

Any ideas why?

Upvotes: 7

Views: 20795

Answers (2)

Michael Benford
Michael Benford

Reputation: 14104

Following up @jusio's answer, it's also possible to use a string expression as long as you make your factory part of the scope:

scope.authentication = authentication;
scope.$watch('authentication.loginRequired', function(value) {
...
});

That's so because when a $watch is provided with a string expression, it evaluates that string against its scope.

You should decide whether it's worth cluttering your directive's scope so you can have an arguably more readable code. If you're already doing it for another reason, then it's no big deal.

Upvotes: 10

jusio
jusio

Reputation: 9910

Scope.$watch accepts as first parameter expression or function. What you are passing as first parameter is a value stored in authetication.loginRequired.

Following will work (assuming you have correctly injected authetication factory):

link: function(scope, element, attrs) {

    scope.show = false;

    scope.$watch(function(){return authentication.loginRequired;}, function(value) {
      scope.show = value;
    });
  }

Upvotes: 22

Related Questions