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

时间:2015-11-16 12:18:57

标签: javascript jquery angularjs twitter-bootstrap angular-ui-tabset

我在网站上使用Inspinia管理主题。我有ui bootstrap角度标签,其中一个我使用dropzone js。我使用了一个自定义指令,并在控制器上我希望成功更新当前选项卡。即使角度变量更新正确,我也需要单击选项卡上的某个位置以显示新值。

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;
        }
     }
  };
}

我应该怎么做才能解决它?

1 个答案:

答案 0 :(得分:1)

我无法确切地说出为什么这种情况会在角度上发生某些级别的回调以及什么不是(仍然是新的和学习的),但基本上如果角度对象在摘要周期之外更新,他们不会#39在前端受到尊重。

好消息是你可以强迫它。

将成功更改为:

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

在我的情况下,我实际上传入了一个名为updateModels(response)的函数,但我认为只是声明里面的函数也可以正常工作。