Question

我正在使用带有侧边栏（在index.html上）的SPA的角度路由，该边栏从categoryListController加载一个类别列表，categoryListController注入了categoryData $ resource服务以检索类别列表。

然后我有一个模板addCategory.html，它在addCategoryController的帮助下添加了一个类别，它也使用了categoryData $ resource服务。

 $scope.categories = categoryData.query(); //categoryListController (for sidebar)

 categoryData.save(newCategory) // on addCategoryController (for addCategory.html)

问题是，除非我刷新整个页面，否则侧边栏不会更新。我想我必须以某种方式告诉categoryListController刷新，但我不知道该怎么做。我可以在categoryData.save（newCategory）之后立即执行$ scope.categories.push（newCategory），并在addCategory.html上立即显示新类别，但我不认为这是我的侧边栏的答案，除非这是某些东西需要用$ rootscope处理？我不确定。感谢

Answer 1

您可以在此处更新categoryListController中的类别列表的方法之一是使用$rootScope来广播详细说明所添加类别的邮件。

在列表控制器中捕获此消息，以便从服务器再次获取列表，或使用新添加的项目使用广播消息发送到列表。

添加控制器中的类似内容

$rootScope.$broadcast('categoryAdded', { 'category': newcategoryObject });

列表控制器中的这样的东西

$scope.$on('categoryAdded', function (event, args) {
    $scope.categories.push(args.category);
});

您可以将$ rootScope作为依赖项注入控制器。

您也可以通过创建CategoryList服务来执行类似的操作。由于服务本质上是单一的，并且可以跨控制器共享，因此使用服务方法，您将定义CategoryList服务，其方法为get和“添加”类别，并绑定到此服务返回的数据。 / p>

Answer 2

您应该创建一个共享数据结构并管理内容的service。

这样的事情：

angular.service('categoryService', function() {
  var categories = [], initilized;

  return {
    this.getCategories = function() {
      if (!initialized) {
        // call resource to fulfill the categories array
        initialized = true;
      }

      // you cold return a promise that would be resolved as soon
      // as you get the first response from server
      return categories;
    });

    this.addCategory = function(category) {
      // code to call $resource, add the category and update the
      // categories array, shared between both controllers
      //
      // you could return the promise for adding the content
    });

    this.removeCategory = ...
   };
});

您甚至不需要致电$resource，此服务可以满足任何持久性需求。当然，如果需要公开承诺，可以更改并添加更多方法。

将数据从一个控制器推送到另一个控制器，$ resource service

2 个答案: