成功时使用 dropzone 更新 angular js 上的选项卡

Question

我在网站上使用 Inspinia 管理主题。我有 ui bootstrap angular 选项卡，我在其中一个选项卡上使用了 dropzone js。我使用了自定义指令，并在我希望成功更新当前选项卡的控制器上使用。即使 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);
      });
   };
}

控制器

 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 中某些级别的回调会发生这种情况，而哪些不是（仍然是新的和正在学习的），但基本上如果 angular 对象在摘要周期，他们在前端得不到尊重。

好消息是你可以强迫它。

将成功更改为：

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

在我的例子中，我实际上传入了一个名为 updateModels(response) 的函数，但我认为只在内部声明该函数也可能有效。

成功时使用 dropzone 更新 angular js 上的选项卡

Update tabs on angular js with dropzone on success

javascript

jquery

twitter-bootstrap

angularjs

angular-ui-tabset