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

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

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

范围。$ watch在指令链接函数中没有被调用

2 个答案: