角度：控制器和指令之間的共享數據。 $ watch如何運作

Question

我有一些JS技能，並且我幾乎是newbee 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（） ？ variable in my service. 最后一個是指向我的服務中的變量的鏈接。 為什么還不夠呢？

謝謝您的幫助。 感謝您的寶貴時間。

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

關於您的問題：

問題是為什么我應該在手表中使用function（）{return sharedData.getDomain（）}而不是sharedData.getDomain（）？ 最后一個是指向我的服務中的域變量的鏈接。 為什么還不夠呢？

如官方文檔中所述 ：

在每次調用$ digest（）時都會調用watchExpression，並且應返回將被監視的值。 （當用同一輸入多次執行watchExpression時，其值不應更改，因為它可能被$ digest（）多次執行。也就是說，watchExpression應該是冪等的。）

watchExpression可以是：

• 一個字符串
• 一個功能

“字符串”是有效的AngulaJS表達式 。 如文檔中所述：

角表達式類似於JavaScript表達式，但具有以下區別：

• 上下文 ：JavaScript表達式是根據全局窗口評估的。 在Angular中，表達式是根據scope對象求值的。

...

因此，如果您在watchExpression指定“字符串”，則AngularJS將根據范圍評估表達式。

如果您將一個function作為watchExpression ，則該函數將返回要監視的值。 每當在范圍內無法輕松檢索要監視的值時，都會使用“函數”（否則，可以使用“字符串”表達式代替“函數”表達式）。

在您的示例中， watchExpression為：

function() {return sharedData.getDomain()}

您的sharedData服務不是在范圍內定義的變量（例如$scope.sharedData = {...} ），而是在其他地方定義的Angular服務。 因此，您必須將function（）用作watchExpression ，否則Angular無法監視域中的更改。