嵌套解析：更新集合中的單個項目？

Question

在我AngularJS/Restangular應用程序，我有一個消息模塊，您可以查看通話清單和個別談話：

angular.module('messages').config(function($stateProvider) { 
    $stateProvider.state('messages', { 
     url: '/messages/', 
     templateUrl: '/messages/list.html', 
     controller: 'MessagesListCtrl as controller', 
     resolve: { 
      'conversations': ['Restangular', function(Restangular) { 
       return Restangular.all('conversations').getList(); 
      }] 
     } 
    }); 

    $stateProvider.state('messages.detail', { 
     url: ':conversationId/', 
     templateUrl: '/messages/conversation.html', 
     controller: 'MessagesDetailCtrl as controller', 
     resolve: { 
      'conversation': ['conversations', 'Restangular', '$stateParams', '$state', function(conversations, Restangular, $stateParams, $state) { 
       return conversations.get($stateParams.conversationId).then(function(data) { 
        Restangular.restangularizeCollection(data, data.messages, 'messages'); 
        return data; 
       }, function() { 
        $state.go('messages'); 
       }); 
      }] 
     } 
    }); 
}); 

正如你可以看到我已經嵌套狀態，列表模板包含一個用戶界面視圖爲詳細模板。我使用瞭解決方案，因此內容不會彈出。現在問題如下：

在列表視圖中，我使用conversation.unreadItems屬性顯示帶有徽章的未讀對話。

在詳細視圖控制器中，我想將該對話標記爲已讀：conversation.unreadItems = false;（我也正在對服務器執行PUT操作）。我如何獲得更新的列表視圖，以便徽章被刪除？

我雖然細節的conversation對象將列表的conversations集合的一部分，因此，這一切應該工作，但事實並非如此。我可以將對話集合傳入詳細信息視圖，搜索正確的對象並修改它，但這似乎有點奇怪？我錯過了什麼嗎？

Answer 1

這裏是一個例子。我有聯繫人而不是消息。在聯繫人的詳細信息視圖中，您可以將其標記爲選中，並且相應地更新列表視圖，並在所選聯繫人旁邊顯示覆選標記。 [Plunker]

$stateProvider 
    .state('contacts', { 
     abstract: true, 
     url: '/contacts', 
     templateUrl: 'contacts.html', 
     controller: function($scope){ 
      $scope.contacts = [{ id:0, name: "Alice" , selected: false}, { id:1, name: "Bob" , selected: false}]; 
     }, 
     onEnter: function(){ 
      console.log("enter contacts"); 
     } 

    }) 
    .state('contacts.list', { 
     url: '/list', 
     // loaded into ui-view of parent's template 
     templateUrl: 'contacts.list.html', 
     onEnter: function(){ 
      console.log("enter contacts.list"); 
     } 
    }) 
    .state('contacts.list.detail', { 
     url: '/:id', 
     // loaded into ui-view of parent's template 
     templateUrl: 'contacts.detail.html', 
     controller: function($scope, $stateParams){ 
      $scope.person = $scope.contacts[$stateParams.id]; 
     }, 
     onEnter: function(){ 
      console.log("enter contacts.detail"); 
     } 
    }) 

contacts.html

<h1>Contacts Page</h1> 
<div ui-view></div> 

contacts.list.html

<ul> 
<li ng-repeat="person in contacts"> 
<a ng-href="#/contacts/list/{{person.id}}">{{person.name}}</a> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<span ng-show= person.selected> {{'\u2713'}} </span> 
</li> 
</ul> 
<div ui-view></div> 

contacts.detail.html

<h2>Details</h2> 
Name: {{person.name}} <br/> 
Mark as selected: <input type='checkbox' ng-model=person.selected> </input>