一般的なファクトリとng-repeatリフレッシュを持つ2つのコントローラ

Question

私はAngularJSに問題があります。 NG-繰り返し、私はNG-繰り返し

を表示する必要があり、私はsecoundコントローラでJSON

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

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

を設定し、私は最初のコントローラでは、コントローラ

の別のインスタンスからJSONに新しい項目を追加するときにループをリフレッシュしたいdosn't

(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> 

&ディスプレイが1つのコントローラに設定されている場合は、すべて問題ありません。

ng-repeatは、2ページのコントローラを使用したい場合、またはロードページの後にすべてのアイテムを正しく表示しますが、新しいアイテムを追加するとループがリフレッシュされず、新しいアイテムが表示されません。

これを修正する方法はありますか？

Answer 1

あなたはどちらかにリピータを変更（および$スコープ変数にFavoriteListServiceことを割り当てる）する必要があります。

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を使用します。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; 
}); 

を、getFavorites機能を使用するコントローラのすべてが同じオブジェクト参照を取得し、それらのすべてに同じ変更を見ますその内容に。

詳細については、AngularJS angular.copy API Reference