Angular: 在控制器和指令之间共享数据。 $watch 如何运作

Question

我有一些 JS 技能，我几乎是新手 Angular。我对 $watch 在我的案例中的工作方式有疑问。任务 - 以适当的方式在指令和控制器之间共享数据。据我了解，最佳做法是使用服务共享数据。所以我有：

指令

angular.module('app.directives').directive('ffDomains', function(sharedData) {
...
    $scope.navigateTo = function(domain, event) {
        $scope.activeDomain = domain;
        sharedData.setDomain(domain);
    };
...
}

工厂

angular.module("app.factories").factory('sharedData', function () {
    var domain = null;

    return {
        setDomain: setDomain,
        getDomain: getDomain
    };

    function setDomain(_domain) {
        domain = _domain;
    }

    function getDomain() {
        return domain;
    }

});

和控制器

angular.module('app.controllers').controller('mainController', ['$scope', 'sharedData', function ($scope, sharedData) {

    $scope.currentDomain = {};
    $scope.$watch(function() {return sharedData.getDomain()}, function() {

        if (sharedData.getDomain()) {
            $scope.currentDomain = sharedData.getDomain();
        } else {
            $scope.currentDomain.domain = 'All domains';
        }
    });

}]);

问题是为什么我应该使用 function() {return sharedData.getDomain()} 而不是 sharedData.getDomain() 在手表里？最后一个是我服务中的 link 到 domain 变量。为什么还不够呢？

非常感谢您的帮助。感谢您的宝贵时间。

Answer 1

在这种特定情况下，您指的是工厂，因此是当前范围之外的变量。

当您将变量传递给观察者时，angular 将评估当前范围内的 字符串，显然它不存在。

var domain sharedData.getDomain();
$scope.$watch('domain', function(newVal, oldVal) { 
//domain doesn't exist in the current scope

});

每次您想观看当前范围之外的内容时，您都必须提供一个回调作为将在消化周期中触发的参数。

$scope.$watch(function(){
  return sharedData.getDomain()
}, function(newVal, oldVal) { 

});

Answer 2

关于您的问题：

The question is Why I should use function() {return sharedData.getDomain()} instead of sharedData.getDomain() in watch? The last one is a link to domain variable in my service. Why is it not enough to whatch on it?

如official documentation所述：

The watchExpression is called on every call to $digest() and should return the value that will be watched. (watchExpression should not change its value when executed multiple times with the same input because it may be executed multiple times by $digest(). That is, watchExpression should be idempotent.)

watchExpression可以是：

一个字符串
一个函数

"string" 是有效的 AngulaJS expression。如文档中所述：

Angular expressions are like JavaScript expressions with the following differences:

Context: JavaScript expressions are evaluated against the global window. In Angular, expressions are evaluated against a scope object.

...

因此，如果您在 watchExpression 中指定 "string"，AngularJS 将根据范围计算表达式。

如果您将 function 作为 watchExpression 传递，该函数将 return 要观察的值。每次无法在范围内轻松检索要监视的值时，都会使用 "function"（否则您可以使用 "string" 表达式而不是 "function" 表达式）。

在您的示例中，watchExpression 是：

function() {return sharedData.getDomain()}

您 sharedData 服务不是范围内定义的变量（例如 $scope.sharedData = {...}），而是在其他地方定义的 Angular 服务。出于这个原因，您必须使用 function() 作为 watchExpression，否则 Angular 无法观察域的变化。

Angular: 在控制器和指令之间共享数据。 $watch 如何运作

Angular: sharedata between controller and directive. How $watch works

javascript

watch

angularjs