Question

我对AngularJS有疑问。当我从另一个控制器实例中添加新项目到JSON时，Ng-repeat dos不想刷新循环

在第一个控制器中，我设置了JSON

(function(){
    'use strict';
    angular.module('mainApp').controller('ListController', function($scope, FavoriteListService) {

    $scope.addToFavorites = function(speaker){
            FavoriteListService.setFavorites(speaker);
        };
})();

在secound控制器中我必须显示ng-repeat

 (function(){
        'use strict';
        angular.module('mainApp').controller('ShowController', function($scope, FavoriteListService) {
    $scope.favoritesList = FavoriteListService.getFavorites();
  })();

厂

(function () {
    'use strict';
    angular.module('mainApp').factory('FavoriteListService', function () {
        var obj = {};

        obj.getFavorites = function () {
            var favorites = localStorage.getItem('speaker-favorites');
            if (favorites == null) {
                favorites = {};
            } else {
                favorites = JSON.parse(favorites);
            }
            return favorites;
        };

        obj.setFavorites = function (speaker) {
            var favorites = obj.getFavorites();
                favorites[speaker.uid] = {firstname: speaker.firstname, name: speaker.name};
            localStorage.setItem('speaker-favorites', JSON.stringify(favorites));
        };
        return obj;
    });
})();

模板：

 <ul>
        <li ng-repeat="(key, fav) in favoritesList">
            {{fav.firstname}} {{fav.name}}
        </li>
    </ul>

一切都很好，当设置和放大显示在一个控制器中。

如果我想使用2个控制器（或1个控制器的2个实例），ng-repeat在加载页面后正确显示所有项目，但是当我添加新项目时，它不刷新循环并且不显示新项目。< / p>

有什么方法可以解决吗？

Answer 1

您需要将转发器更改为（并将FavoriteListService分配给$ scope变量）：

ng-repeat="(key, fav) in FavoriteListService.getFavorites()"

或$在控制器中观看喜欢的列表：

$scope.$watch(
  function() { return FavoriteListService.getFavorites(); },
  function(newValue, oldValue) {
    if ( newValue !== oldValue ) {
      $scope.favoritesList = newValue;
    }
  },
  true
);

因为当您将服务方法返回到范围方法时，它不像引用一样工作。

Answer 2

创建一个空对象，并使用angular.copy更新对象：

app.factory('FavoriteListService', function () {
    var obj = {};
    //create empty object
    var favorites = {};

    obj.getFavorites = function () {
        let update = localStorage.getItem('speaker-favorites');
        if (update) {
           //Use angular copy
           angular.copy(update, favorites);
        };
        return favorites;
    };

    obj.setFavorites = function (speaker) {
        favorites[speaker.uid] = {firstname: speaker.firstname, name: speaker.name};
        localStorage.setItem('speaker-favorites', JSON.stringify(favorites));
    };
    return obj;
});

通过使用angular.copy，使用getFavorites函数的所有控制器都获得相同的对象引用，并且所有控制器都看到对其内容的相同更改。

有关详细信息，请参阅AngularJS angular.copy API Reference

两个控制器具有通用工厂和ng-repeat刷新

2 个答案: