AngularJS：$ rootScope。$ watch无法正常工作

Question

我试图使用$rootScope跟踪我的应用程序中的收藏夹，因为它们被修改了，所以我想告诉应用程序更新本地存储以使其匹配。

在我的控制器中，我正在使用以下功能来添加/删除收藏夹：

$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删除某些内容时，它只会触发console.log() ，我在做什么错？

Answer 1

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

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

你试一试：

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

要么

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

使用$timeout可能$diggest already in process ，但可以避免$diggest already in process 。

有关$ apply和$ timeout的更多信息。