AngularJS HotTowel在ajax調用期間調用微調框

Question

我想在應用程序內的任何xhr調用期間調用微調框。而當我點擊菜單或路由到不同的頁面時，微調框出現了。

索引頁

<aside class="main-sidebar"> 
      <!-- sidebar: style can be found in sidebar.less --> 
      <section class="sidebar"> 
       <!-- Sidebar user panel (optional) --> 
       <div data-cc-sidebar data-ng-controller="sidebar as vm"> 
        <ul class="sidebar-menu"> 
         <li data-ng-repeat="r in vm.navRoutes"> 
          <a href="#{{r.url}}" data-ng-bind-html="r.config.settings.content"></a> 
         </li> 
        </ul> 
       </div> 
      </section> 
      <!-- /.sidebar --> 
     </aside> 
     <!-- Content Wrapper. Contains page content --> 
     <div class="content-wrapper" data-ng-controller="shell as vm"> 
      <!-- Content Header (Page header) --> 
      <section class="content-header"></section> 
      <!-- Main content --> 
      <section class="content"> 
       <!-- Your Page Content Here --> 
       <div data-ng-show="vm.isBusy" class="page-splash dissolve-animation"> 
        <div data-cc-spinner="vm.spinnerOptions"></div> 
        <div class="page-splash-message page-splash-message-subtle">{{vm.busyMessage}}</div> 
       </div> 
       <div data-ng-view class="shuffle-animation"></div> 
      </section><!-- /.content --> 
     </div><!-- /.content-wrapper --> 

Shell.js

我照着下面的指令改變了shell.js文件。 從 $ rootScope。$上（events.spinnerToggle，功能（數據）） 要 $ rootScope。$上（events.spinnerToggle，函數（事件數據））

而且從下面的鏈接找到評論

http://johnpapa.net/hot-towel-angular/

(function() { 
    'use strict'; 

    var controllerId = 'shell'; 
    angular.module('app').controller(controllerId, 
     ['$rootScope', 'common', 'config', shell]); 

    function shell($rootScope, common, config) { 
     var vm = this; 
     var logSuccess = common.logger.getLogFn(controllerId, 'success'); 
     var events = config.events; 
     vm.busyMessage = 'Please wait ...'; 
     vm.isBusy = true; 
     vm.spinnerOptions = { 
      radius: 40, 
      lines: 7, 
      length: 0, 
      width: 30, 
      speed: 1.7, 
      corners: 1.0, 
      trail: 100, 
      color: '#F58A00' 
     }; 

     activate(); 

     function activate() { 
      logSuccess('SIPPRES loaded!', null, true); 
      common.activateController([], controllerId); 
     } 

     function toggleSpinner(on) { vm.isBusy = on; } 

     $rootScope.$on('$routeChangeStart', 
      function (event, next, current) { toggleSpinner(true); } 
     ); 

     $rootScope.$on(events.controllerActivateSuccess, 
      function (data) { toggleSpinner(false); } 
     ); 

     $rootScope.$on(events.spinnerToggle, 
      function (event,data) { toggleSpinner(data.show); } 
     ); 
    }; 
})(); 

指令看起來像

app.directive('ccSpinner', ['$window', function ($window) { 
     // Description: 
     // Creates a new Spinner and sets its options 
     // Usage: 
     // <div data-cc-spinner="vm.spinnerOptions"></div> 
     var directive = { 
      link: link, 
      restrict: 'A' 
     }; 
     return directive; 

     function link(scope, element, attrs) { 
      scope.spinner = null; 
      scope.$watch(attrs.ccSpinner, function (options) { 
       if (scope.spinner) { 
        scope.spinner.stop(); 
       } 
       scope.spinner = new $window.Spinner(options); 
       scope.spinner.spin(element[0]); 
      }, true); 
     } 
    }]); 

謝謝

Answer 1

我找到了我的解決方案。上面的代碼工作正常。不幸的是，我把我的spinner.spinnerShow（）;在控制器的錯誤位置。波紋管控制器功能工作正常。

function updateColor(updatedColor) { 
      spinner.spinnerShow(); 
      return datacontextSetting.updateColor(updatedColor).then(function (data) { 
       $scope.newColor = data; 
       $uibModalInstance.close($scope.newColor); 
      }, function (response) { 

       $scope.frmColor.$valid = false; 

       // Here is where we can catch the errors and start using the response. 
       if (!angular.isUndefined(response.statusCode)) { 
        $scope.errorMessage = response.statusCode + "\n"; 
       } 

       if (response.modelState) { 
        for (var key in response.modelState) { 
         $scope.errorMessage += response.modelState[key] + "\n"; 
        } 
       } 
       if (response.message) { 
        $scope.errorMessage += response.message; 
       } 
      }).finally(function() { 
       spinner.spinnerHide(); 
      }); 
     }; 

感謝