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

如您所见，我有嵌套状态，列表模板包含详细信息模板的ui视图。我使用了解析，所以内容不会到位。现在问题是：

在列表视图中，我使用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>

嵌套解析：更新集合中的单个项目？

1 个答案: