指令链接函数中的 scope.$watch 没有被调用答案

【问题标题】：scope.$watch in directive link function not getting called指令链接函数中的 scope.$watch 没有被调用
【发布时间】：2013-10-09 19:49:35
【问题描述】：

我有这个工厂，

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

    return {
      loginRequired: false
    };
  }]);

我有这个控制器，

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

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

}]);

我在指令中有这个链接功能，

link: function(scope, element, attrs) {

    scope.show = false;

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

在控制器中完成authentication.loginRequired = true; 时，不会调用指令中的scope.$watch。

有什么想法吗？

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

Scope.$watch 接受第一个参数表达式或函数。您作为第一个参数传递的是存储在authetication.loginRequired 中的值。

以下将起作用（假设您已正确注入authetication factory）：

link: function(scope, element, attrs) {

    scope.show = false;

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

【讨论】：

FWIW，您也可以将工厂分配给范围，然后将$watch 与字符串表达式一起使用。
请分享你的意思，迈克尔。看到替代品总是好的。

【解决方案2】：

按照@jusio 的回答，只要您将工厂作为范围的一部分，也可以使用字符串表达式：

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

之所以如此，是因为当 $watch 提供了一个字符串表达式时，它会根据其范围评估该字符串。

您应该决定是否值得弄乱指令的范围，这样您就可以拥有可以说更具可读性的代码。如果您出于其他原因已经这样做了，那没什么大不了的。

【讨论】：