javascript - AngularJS:$rootScope.$watch 没有按预期工作

Question

我正在尝试使用 $rootScope 来跟踪我的应用程序中的收藏夹，当它们被修改时，我想告诉应用程序更新本地存储以匹配。

在我的 Controller 中，我使用以下函数来添加/删除收藏夹:

$scope.toggleFavorite = function(product) {
    var item = {
        id: product.id,
        name: product.name
    }

    if (_.findWhere($rootScope.favoriteDrinks, item)) {
        console.log('Rootscope contains the item: Removing');
        $rootScope.favoriteDrinks = _.reject($rootScope.favoriteDrinks, function(favorite) {
            return favorite.id === item.id;
        });
    } else {
        console.log('Rootscope doesn\'t contain the item: Adding');
        $rootScope.favoriteDrinks.push(item);
    }

    console.log($rootScope.favoriteDrinks);
}

console.log() 产生了预期的结果，它正在更新和删除我在整个应用程序中添加的收藏夹。

对于 $rootScope 我的 app.js` 中有以下代码:

.run(['localStorageService', '$rootScope', function(localStorageService, $rootScope) {
    if (!localStorageService.get('favoriteDrinks')) { localStorageService.add('favoriteDrinks', []) };

    _.extend($rootScope, {
        favoriteDrinks: localStorageService.get('favoriteDrinks')
    });

    $rootScope.$watch('favoriteDrinks', function() {
        console.log('Favorite Drinks Modified');
    });
}]);

因此在应用程序启动时，如果 localstorage 键不存在，我会创建空键，然后扩展 $rootScope 以包含从 localStorage 检索到的收藏夹。然后我将 $watch 添加到 $rootScope，但是当我从 $rootScope，我做错了什么？

Answer 1

嗯，我不确定 _.reject(...) 做了什么，但我认为它是异步的。

要使$watch 语句正常工作，我们需要将update 语句放到一个异步调用中。在您的情况下，您应该 $apply 或 $timeout。

试试看:

$rootScope.$apply(function () {
    $rootScope.favoriteDrinks.push(item);
});

或

$timeout(function () {
    $rootScope.favoriteDrinks.push(item);
});

使用 $timeout 可能有点 hack-ish，但它可以避免 $diggest already in process 问题。

关于 $apply 的更多信息和 $timeout .