Question

在添加具有不同控制器的类别后，更新类别列表（例如在导航中）的最佳方法是什么？
这是我的代码

// add new category
app.controller('AddCategoryController', ['$scope', 'CategoryService', function($scope, CategoryService) {

  $scope.category = {};

  $scope.added = false;

  $scope.addCategory = function() {
    CategoryService.addCategory($scope.category).then(function(response) {
        if(response == 'ok') {
            $scope.added = true;
        }
    });
  };
}]);

这是用于显示类别的控制器

app.controller('CategoriesController', ['$scope', 'CategoryService', function($scope, CategoryService) {
  CategoryService.getCategories().then(function(categories) {
    $scope.categories = categories;
  });
}]);

类别显示在导航

中

<nav>
  <div class="list-group" ng-controller="CategoriesController">
    <a ng-href="#category/{{category.id}}" class="list-group-item" ng-repeat="category in categories" ng-bind="category.name"></a>
  </div>

  <div class="list-group">
    <a href="#add-category" class="list-group-item">Add category</a>
  </div>
</nav>

编辑这是服务

services.factory('CategoryService', ['$route', 'Restangular', function($route, Restangular) {
  var Category = Restangular.all('categories');

  return {
    getCategories: function() {
        return Category.getList();
    },
    getCategory: function(id) {
        id = id ? id : $route.current.params.categoryId;
        return Category.get(id);
    },
    addCategory: function(category) {
        return Category.post(category);
    },
    editCategory: function(category) {
        return category.put()
    },
    removeCategory: function(id) {
        id = id ? id : $route.current.params.categoryId;
        return Category.remove(id);
    }
  };
}]);

Answer 1

服务是AngularJS中的单例。因此，在您致电CategoryService.addCategory后，您可以更新服务中的类别列表，并且该列表可供其他控制器使用。

您还可以丰富您的服务以缓存类别。这有助于您避免对后端发出不必要的请求。

您可以构建自己的缓存逻辑或使用：

RestangularProvider.setDefaultHttpFields({cache: true});

此外，您可以使用$rootScope.$on和$rootScope.$emit来接收和发送活动。这有助于您以实时方式在组件之间进行通信。

 // send event
$rootScope.$emit(nameOfEvent, args...);

在其他一些控制器/服务中

// subscription
var unbind = $rootScope.$on(nameOfEvent, function(event, args...) { /* do stuff */ });

// don't forget to unbind
$scope.$on('$destroy', function() { 
  unbind(); 
});

AngularJS - RestAngular - 在post添加新类别后，在其他控制器中更新类别列表

1 个答案: