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

Question

我正在开发一个使用 AngularJS 作为前端一部分的开源应用程序，因为我希望它以这种方式工作（它偏执，从 dom 中删除和添加内容为了保护）我运行遇到了一个我似乎无法弄清楚的问题。

网站的主要内容通过从 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
      });
    };
    });

执行 POST 的控制器：

  .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");
        });
    };
  });

工作版本位于 http://sikr.io/login.html（这是 alpha！，不要存储任何对你重要的东西，因为数据库将被清除）

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

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

Answer 1

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

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

在控制器上：

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

关于指令：

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

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

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

Reload directive method after POST in Angular JS

javascript

angularjs

angularjs-directive

angularjs-scope