1

Я использую тему администрирования Inspinia на веб-сайте. У меня есть угловые вкладки ui bootstrap, на одном из которых я использую dropzone js. Я использовал настраиваемую директиву и на контроллере, я хочу, чтобы успел обновить текущую вкладку. Несмотря на то, что угловые переменные обновляются правильно, мне нужно щелкнуть где-нибудь на вкладках, чтобы они отображали новые значения.Обновить вкладки на угловых js с dropzone на успех

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

Я не могу точно сказать, почему это происходит в угловом для определенных уровней обратных вызовов, а что нет (все еще новое и обучение), но в основном, если угловые объекты обновляются вне цикла дайджестов, они не получают соблюдается в переднем конце.

Хорошая новость - вы можете заставить ее.

Изменить успех:

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

В моем случае, я на самом деле прошло в функции я сделал называется updateModels (ответ), но я думаю, просто объявляя функция внутри может работать.

+0

Большое спасибо! Ну, я нашел этот $ scope. $ Apply ранее, но по какой-то причине $ apply бросил ошибку на хром-консоли. Теперь ti отлично работает! Провел довольно много времени с этим! – Agraell

+0

Ваше время было совершенным. У меня была эта специфическая проблема (с Dropzone тоже) прошлой ночью. :) –

+0

Dropzone немного смутил меня с угловатым. Если вы используете Inspinia, директива действительно плоха, поскольку она вмешивается и не позволяет настраивать пользовательские настройки в контроллере. Я нашел этот контроллер откуда-то еще, и он работает как шарм. – Agraell

Смежные вопросы