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，但是当我从console.log()删除某些内容时，它只会触发$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的更多信息。

AngularJS：$ rootScope。$ watch没有按预期工作

1 个答案: