角度表廠價值

Question

說我有以下工廠：

app.factory("categoryFactory", function (api, $http, $q) {    
    var selected = null;
    var categoryList = [];
    return {
        getList: function () {
            var d = $q.defer();
            if(categoryList.length  <= 0){
                $http.get(api.getUrl('categoryStructure', null))
                    .success(function (response) {
                        categoryList = response;
                        d.resolve(categoryList);
                    });
            }
            else
            {
                d.resolve(categoryList)
            }
            return d.promise;
        },
        setSelected: function (category) {
            selected = category;
        },
        getSelected: function () {
            return selected;
        }
    }    
});

現在我有兩個控制器同時使用這個工廠。 因此，在更新此控制器時必須通知兩個控制器，我嘗試了以下方法：

    app.controller('DashboardController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api','categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, categoryFactory) {

    $scope.selectedCategory = categoryFactory.getSelected();

}]);

而我的其他控制器看起來像這樣：

    app.controller('NavController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'FileUploader', 'categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, FileUploader, categoryFactory) {
    $scope.categories = [];

    categoryFactory.getList().then(function (response) {
        $scope.categories = response;
    });
    $scope.selectCategory = function (category) {
        categoryFactory.setSelected(category);
    }

}]);

NavController如何更改DashboardController未更改的值

我的問題是，當價值發生變化時，我如何watch或以其他方式獲得通知？

Answer 1

您可以使用observer模式，如下所示：

app.factory("categoryFactory", function (api, $http, $q) {   
    // the list of callbacks to call when something changes
    var observerCallbacks = []; 

    // ...

    function notifyObservers() {
        angular.forEach(observerCallbacks, function(callback) {
            callback();
        });
    }

    return {
        setSelected: function (category) {
            selected = category;
            // notify the observers after you change the value
            notifyObservers();
        },
        registerObserver: function(callback) {
            observerCallbacks.push(callback);
        }
    }    
});

然后在你的控制器中：

app.controller('NavController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'FileUploader', 'categoryFactory', function ($http, $scope, $sessionStorage, $log, Session, api, FileUploader, categoryFactory) {
    // ...

    // init
    (function() {
        categoryFactory.registerObserver(function() {
            categoryFactory.getList().then(function (response) {
                $scope.categories = response;
            });
        });
    })();

}]);

這樣，任何時候setSelected ，它都會調用您在observerCallbacks注冊的每個回調。 您可以從任何控制器注冊這些，因為工廠是單身人士，他們將永遠在知道。

編輯：只是想添加我可能已將notifyObservers()調用放在錯誤的區域（當前在setSelected ）並且我可能在控制器（當前是getList ）中放入了錯誤的更新調用，但架構保持不變。 在registerObserver ，在更新值時放置您想要執行的任何操作以及您希望觀察者了解有關調用notifyObservers()更改的位置

Answer 2

您可以在此處遵循點規則 ，以便遵循原型繼承。

基本上你需要在你的服務中有一個對象，它將selected變量，並且將擺脫getSelected方法。

廠

app.factory("categoryFactory", function(api, $http, $q) {
    var categoryFactory = {};
    categoryFactory.getList = function() {
        var d = $q.defer();
        if (categoryList.length <= 0) {
            $http.get(api.getUrl('categoryStructure', null))
                .success(function(response) {
                    categoryList = response;
                    d.resolve(categoryList);
                });
        } else {
            d.resolve(categoryList)
        }
        return d.promise;
    }
    categoryFactory.setSelected = function(category) {
        categoryFactory.data.selected = category;
    }
    categoryFactory.data = {
        selected: null
    }
    return categoryFactory;
});

調節器

app.controller('DashboardController', ['$http', '$scope', '$sessionStorage', '$log', 'Session', 'api', 'categoryFactory',
    function($http, $scope, $sessionStorage, $log, Session, api, categoryFactory) {
        //this will provide you binding without watcher
        $scope.selection = categoryFactory.data;
    }
]);

然后在html部分使用{{selection.selected}}將在選擇中發生更改時更新值。