javascript - 成功后使用 dropzone 更新 Angular js 上的选项卡

Question

我在网站上使用 Inspinia 管理主题。我有 ui bootstrap Angular 选项卡，其中一个我使用 dropzone js。我使用了自定义指令，并且在 Controller 上我希望成功更新当前选项卡。即使 Angular 变量已正确更新，我也需要单击选项卡上的某个位置才能显示新值。

HTML

 <tabset>
    <tab heading="Tab 1" ng-attr-active="vm.tabs[0].active">
       <div class="panel-body col-sm-12">
           <div ng-if="!vm.isResultsLoaded">
               <form class="dropzone" drop-zone="dropzoneConfig" id="dropzone">
                  <button id="submitFile" ng-click="vm.update()" type="submit" class="btn btn-primary pull-right">Submit this form!</button>
               </form>
            </div>
            <div class="table-responsive" ng-if="vm.isResultsLoaded">
                  <button class="btn btn-primary" ng-click="vm.switchToUpload()" type="submit">Ladda mer filer</button>
            <table class="table">
                        ...
            </table>
          </div>
       </div>
     </tab>
 </tabset>

指令

function dropZone() {
   return function (scope, element, attrs) {
      var config = scope[attrs.dropZone];

      // create a Dropzone for the element with the given options
      var dropzone = new Dropzone(element[0], config.options);

      // bind the given event handlers
      angular.forEach(config.eventHandlers, function (handler, event) {
         dropzone.on(event, handler);
      });
   };
}

Controller

 function tabListController(uploadService, $state, $scope) {
  ...

  $scope.dropzoneConfig = {
     "options": {
        "url": "/api/system/fileupload",
        "method": "post",
        "autoProcessQueue": false
     },
     "eventHandlers": {
        "addedfile": function (file, xhr, formData) {
           var myDropzone = this;
           $('#submitFile').click(function () {
               myDropzone.processQueue();
           });
        },
        "success": function (file, data) {
           vm.results = data;
           vm.isResultsLoaded = true;
        }
     }
  };
}

有什么想法我应该做些什么来解决它吗？

Answer 1

我无法确切说明为什么在某些级别的回调中会发生这种情况，以及什么不会发生(仍然是新的和学习的)，但基本上，如果 Angular 对象在摘要周期之外更新，它们就不会得到尊重在前端。

好消息是你可以强制它。

将成功更改为:

$scope.$apply(function () {
    vm.results = data;
    vm.isResultsLoaded = true;
});

就我而言，我实际上传递了一个名为 updateModels(response) 的函数，但我认为仅在内部声明该函数也可能有效。