Question

我开发了一个开源应用程序，它使用AngularJS作为前端的一部分，因为我希望它的工作方式（它的偏执，删除和添加来自dom的内容以保护）I＆I ＃39;遇到了一个我似乎无法弄清楚的问题。

网站的主要内容是通过一个服务加载的，该服务从REST API收集数据并填充指令，同一指令调用模板并呈现内容。

问题在于，当您添加新内容并且POST成功时，我无法告诉指令重新加载内容，因为POST调用来自控制器另一个$scope。我已尝试使用$watch，$apply，$push，最近我一直在考虑$resource，但我认为不是.directive("itemList", function ($timeout) { return { restrict: 'A', template: "<ng-include src='getTemplateUrl()'/>", replace: true, controllerAs: 'items', controller: function ($http, $scope, sikreAPIservice) { $scope.getItems = function (categoryId) { sikreAPIservice.getItemsbyCategory(categoryId) .success(function (data, status) { $scope.category_name = data.category_name; $scope.category_id = data.category_id; $scope.items = data.items; $scope.lockedItem = false; $timeout(function () { $scope.lockedItem = true; $.notify("View time expired. Locking...", "info"); $scope.getTemplateUrl(); }, itemTimeout); }) .error(function (data, status) { $.notify("Couldn't get the item data", "error"); }); }; $scope.getAllItems = function () { sikreAPIservice.getItems() .success(function (data) { $scope.category_name = data.category_name; $scope.category_id = data.category_id; $scope.items = data.items; $scope.lockedItem = false; $timeout(function () { $scope.lockedItem = true; $.notify("View time expired. Locking...", "info"); $scope.getTemplateUrl(); }, itemTimeout); }) .error(function (data, status) { $.notify("Couldn't get the item data", "error"); }); }; $scope.getTemplateUrl = function () { if ($scope.lockedItem) { return ''; } else { return 'includes/items.html'; } $(document).foundation('reflow'); }; }, }; });是解决方案。代码如下：

指令：

  .factory('sikreAPIservice', function ($http) {
    //var mainAPIUrl = 'https://api.sikr.io/v1/';
    var sikreAPI = {};
    sikreAPI.getItemsbyCategory = function (categoryId) {
      return $http({
        method: "GET",
        url: mainAPIUrl + 'items?category=' + categoryId,
        cache: false
      });
    };
    });

服务：

  .controller('ItemsCtrl', function ($scope, $compile, sikreAPIservice) {
   $scope.additem = function (item) {
      sikreAPIservice.createItem(item)
        .success(function () {
          $.notify("Item created", "success");
          $scope.item = null;
          $('#addItem').foundation('reveal', 'close');
        })
        .error(function () {
          $.notify("Can't save the item", "error");
        });
    };
  });

执行POST的控制器：

POST

工作版本位于http://sikr.io/login.html（这是alpha！，不要存储任何对您重要的内容，因为数据库需要被删除）

源代码位于https://github.com/clione/sikre-frontend/tree/master/assets/js

我同意整个应用程序的布局可能并不是最好的，因此欢迎任何纠正它的指导。如果有人知道如何让指令在{{1}}之后重新加载内容，我们将不胜感激。

Answer 1

此解决方案由@ Cerad的评论提供。

基本上我必须创建一个仅由指令捕获并重新加载内容的广播信号。

在控制器上：

$rootScope.$broadcast('updateItems', $scope.item.category);

在指令上：

$scope.$on('updateItems', function (event, data) {
  $scope.getItems(data);
});

getItems是一个调用服务并获取数据的函数。

在Angular JS中POST后重新加载指令方法

1 个答案: