Управление поворотным устройством Angularjs с использованием $ q.all

Question

Я реализую функцию spinner в моем проекте. Золото должно показать счетчик, когда один или несколько запросов HTTP уволены, и спрячьте счетчик, когда запросы будут успешными. Поскольку я не знаю, какой запрос будет разрешен первым, я решил использовать $ q.all. У меня есть директива, как это:

angular.module('myApp', []) 
    .directive('spinner', function($q, $http) { 
    return { 
     controller: function($scope) { 
     $scope.showSpinner = true; 
     var self = this; 
     self.promises = []; 

     self.makeHeader = function() { 
      self.promises.push($http.get('some/url')); 
      // Code that builds header goes here. 
     }; 

     self.makeFooter = function() { 
      self.promises.push($http.get('other/url')); 
      // Code that builds footer goes here. 
     }; 

     self.makeHeader(); 
     self.makeFooter(); 

     // Initial page load 
     $q.all(self.promises).then(function() { 
      // Hide the spinner. 
      $scope.showSpinner = false; 
     }); 
     } 
    } 
    }); 

Начальная нагрузка работает отлично, но когда пользователь имеет взаимодействие, которое требует несколько вызовов на сервер, чтобы восстановить верхние и нижние колонтитулы. Как я снова покажу счетчик и спрячу его, когда обещания будут решены?

Answer 1

Вы можете перевернуть повторные вызовы в функцию. Я также рекомендую сделать 2 функции, чтобы возвращать обещание вместо обработки $ http prom внутри, чтобы обеспечить большую гибкость.

angular.module('myApp', []) 
    .directive('spinner', function($q, $http) { 
    return { 
     controller: function($scope) { 
     var self = this; 

     self.makeHeader = function() { 
      return $http.get('some/url').then(function() { 
      // Code that builds header goes here. 
      });   
     }; 

     self.makeFooter = function() { 
      return $http.get('other/url').then(function() { 
      // Code that builds footer goes here. 
      }); 
     }; 

     self.build = function() { 
      $scope.showSpinner = true; 
      self.promises = []; 

      self.promises.push(self.makeHeader()); 
      self.promises.push(self.makeFooter()); 

      $q.all(self.promises).then(function() { 
      // Hide the spinner. 
      $scope.showSpinner = false; 
      }); 
     } 

     // initial run 
     self.build(); 

     // subsequent call 
     self.someClickHandler = function() { 
      self.build(); 
     } 

     // some other calls that need to use spinner 
     self.other = function() { 
      $scope.showSpinner = true; 
      self.promises = []; 

      self.promises.push(self.otherCall()); 

      $q.all(self.promises).then(function() { 
      // Hide the spinner. 
      $scope.showSpinner = false; 
      }); 
     } 
     } 
    } 
    }); 

Как вы можете видеть, этот подход будет выглядеть лучше, если вы всегда вызывать тот же набор функций, каждый раз, но что, если вам нужно использовать блесну в других подобных случаях self.other?

Вы можете обернуть вращающийся элемент функцией и передать ему массив обещаний.

var showSpinner = function(promises) { 
    $scope.showSpinner = true; 

    $q.all(promises).then(function() { 
    // Hide the spinner. 
    $scope.showSpinner = false; 
    }); 
} 

self.build = function() { 
    var promises = []; 

    promises.push(self.makeHeader()); 
    promises.push(self.makeFooter()); 

    showSpinner(promises); 
} 

self.other = function() { 
    var promises = [];  
    promises.push(self.otherCall()); 

    showSpinner(promises); 
} 

Выглядит чище?