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

Question

我有这个工厂，

.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不会调用指令中的。

任何想法为什么？

Answer 1

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

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

link: function(scope, element, attrs) {

    scope.show = false;

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

Answer 2

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

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

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

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