Javascript 两个控制器具有通用工厂和ng重复刷新功能

我对AngularJS有意见。当我从控制器的另一个实例向JSON添加新项时，Ng repeat dosn不想刷新循环

在第一个控制器中，我设置了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>

{{fav.firstname}{{fav.name}

当设置和显示在一个控制器中时，一切正常

如果我想使用2个控制器（或1个控制器的2个实例），请重复在加载页面后正确显示所有项目，但当我添加新项目时，它不会刷新循环，也不会显示新项目

---

有什么方法可以修复它吗

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

或者在控制器中查看最喜爱的列表，如下所示：

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

---

因为当您分配服务方法returntoscope方法时，它不像引用那样工作

创建一个空对象，并使用

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

函数的控制器都会获得相同的对象引用，并且所有控制器都会看到对其内容的相同更改

---

有关详细信息，请参见

第一个解决方案不起作用，但secound解决了我的问题。谢谢

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;
});