javascript - 如何刷新模板中存在的指令并且指令具有自己的数据范围

Question

我有 - ng-view - 模板创建项目功能和包含一个加载已保存项目的指令的相同模板。

现在，当我保存创建项目并立即时，它不会刷新项目列表(来自指令)。

谁能告诉我如何解决这个问题，因此，保存项目后，立即刷新指令。

注意:指令链接函数正在调用 $http 并检索数据并填充到指令模板中。并且指令元素被添加到其他html模板中。

html 模板:(具有单独的 Controller 和范围)。

    <div>.....code</div>
    <div class="col-md-12">
    <parts-list></parts-list>
   </div>

指令代码:

(function () {
    angular.module("application")
       .directive("partsList", function (partService) {
           return {
               templateUrl: 'partsListView.html',
               restrict: 'E',
               scope: {},
               link: function ($scope) {
                   $scope.partList = [{}];
                   RetrieveParts = function () {
                       $scope.partList=partService.RetrieveParts();
                   };
               }
           };
       });
})();

Answer 1

对于初学者来说，您的 ReceiveParts 变量没有正确的闭包。另外，你调用这个函数吗？我不确定这个函数在哪里执行。

link: function ($scope) {
               $scope.partList = [{}];
               RetrieveParts = function () {
                   $scope.partList=partService.RetrieveParts();
               };
           }

我学到的一个简单技巧，通过简单地将我需要的逻辑与 $timeout 服务同步包装($timeout 只是一个setTimeout 调用后跟 $scope.$apply())。执行此技巧将使您的代码看起来像:

link: function ($scope) {
               $scope.partList = [{}];
               $scope.fetchedPartList = false;

               $timeout(function() {
                   $scope.partList = partService.RetrieveParts();
                   $scope.fetchedPartList = true;
               });
           }

此外，您会注意到我在设置partList之后设置的 bool 值。在 HTML 中，您可以对此变量使用 ng-if (或 ng-show/hide)，以便仅在正确解析后显示列表。

希望这对您有帮助。