0

我有两个控制器，用于添加项目和删除项目，以及一个用于显示所有项目的模型。该模型被注入到控制器中（在同一模板上工作）。

每当添加一个项目时，我都会广播一条消息，模型会监听该消息并从服务器重新加载数据。

代码：

ItemModule.factory('ItemListModal', function ($resource, $rootScope){
  var allItem = $resource('item/page/:pageId.json', {'pageId': pageId });
  var items = allItem.query();
  $rootScope.$on('ItemAdded',function(){
         items = allItem.query();
  });
  return items;
});

//Item is another Model, used to send data on server.
function CreateItemCtrl($scope, $rootScope, Item) {
    $scope.save = function() {
    Item.save($scope.item, function(data) {
                      $scope.result = data;
                      $rootScope.$broadcast('ItemAdded');
                    }, function(data) { 
                      $scope.result = data.data;
      });
    }
}

function ListItemCtrl($scope, ItemListModal) {
    $scope.allItems = ItemListModal;
}

问题：现在，由于在首次加载模板时已经解决了对 ListItemCtrl 的依赖，因此在添加项目时它只会更改模型，但这不会重新注入到 ListItemCtrl 中。因此，模板上的列表不会改变。

有没有办法告诉 AngularJS 重新解决控制器的依赖关系？

我真的不想在控制器中监听事件并在那里重新查询数据，因为还有其他控制器也需要来自服务器的相同数据。

4

2 回答 2

1

为您从服务返回的内容添加另一个级别的间接性。

ItemModule.factory('ItemListModal', function ($resource, $rootScope){
  var allItem = $resource('item/page/:pageId.json', {'pageId': pageId });
  var data = {items:allItem.query()};
  $rootScope.$on('ItemAdded',function(){
         data.items = allItem.query();
  });
  return data;
});


function ListItemCtrl($scope, ItemListModal) {
    $scope.allItems = ItemListModal;
    // use as $scope.allItems.items wherever you need it.  It will update when changes occur.
}

但是最好在客户端上有一个项目列表的规范表示，并在您添加内容时保持最新状态（只是将其安静地保存到服务器）。

于 2013-06-21T21:08:13.480 回答
0

问题似乎是，虽然项目正在更新（您是否在 $on 中尝试过 console.log？）它不是一个对象，因此没有通过引用传递。如果您将服务切换到此：

ItemModule.factory('ItemListModal', function ($resource, $rootScope){
    var ItemListModalScope = this;
    var allItem = $resource('item/page/:pageId.json', {'pageId': pageId });
    ItemListModalScope.items = allItem.query();
    $rootScope.$on('ItemAdded',function(){
        ItemListModalScope.items = allItem.query();
    });
    return ItemListModalScope;
});

然后无论你在你的圆顶中使用你的 allItems，你都会做

{{ allItems.items }}
于 2013-06-21T21:04:39.613 回答