Обратный звонок/отправка из перехватчика в директивы

Question

У меня есть приложение с AngularJS.

Это приложение использует множество директив с изолированной областью и без нее. Существуют две службы, которые загружают и отправляют данные, используя систему sub/pub. Ничего страшного.

Теперь у меня следующий сценарий: каждый раз, когда какой-либо сервис запускает метод «get/post/etc», я хочу показать прелоадер. Когда данные вернутся, я хочу скрыть предварительный загрузчик. Хорошо, хорошо, службы отправляют событие, директиву Preloader слушают это, и, при обращении к успеху/ошибке, отправляется новое событие, и я скрываю preloader.

Но в реальном мире это не полезно. Мне нужно отправлять события, такие как «onStartLoad» из моих служб, и это загрязняет код. Вот пример одного метода в моих услугах:

var service = { 
    onOffersLoaded: new signals.Signal(), 
    // (... many other events/signals here) 

    // On start any request event: 
    onStartAny: new signals.Signal(), 

    // On end any request event:  
    onEndAny: new signals.Signal(), 

    getOffers: function(store) { 
     // Dispatch that the request is about to begin: 
     service.onStartAny.dispatch(); 

     var url = config.apiUrl + "/my-ending-point-here"; 
     $http.get(url) 
      .success(function(data) { 
       // Dispatch that the request got back: 
       service.onEndAny.dispatch(); 

       service.onOffersLoaded.dispatch(data, store); 
      }) 
      .error(function(error) { 
       // Dispatch that the request got back: 
       service.onEndAny.dispatch(); 

       service.onError.dispatch(error); 
      }); 
    }, 

Как вы можете видеть, я должен распространяться service.onStartAny.dispatch(); и service.onEndAny.dispatch(); все вокруг моих методов. Это очень раздражает и грязно.

Тогда я подумал: я мог бы использовать Interceptor. E очень длительные данные поступают в мое приложение или из него, Interceptor может «поймать» эти запросы, и он может отправить событие в мою директиву Preloader. Для этого моим службам не придется иметь дело с этими событиями «запуск/завершение запросов».

Но я не знаю, как «получить доступ» к директиве от моего перехватчика ИЛИ как добавить обратные вызовы к моему перехватчику из Директивы. Является ли это возможным? Или единственным способом будет «rootScope broadcast» от Interceptor?

Любая помощь очень ценится. Спасибо.

Answer 1

Ответ, который я нашел, был прост: поскольку перехватчики - это просто угловая фабрика, она вводится в мой контроллер так же, как и любая другая услуга.

Таким образом, в конце концов, это мой перехватчик:

angular.module("offersApp").factory("preloaderInterceptor", function($q) { 
"ngInject"; 

var interceptor = { 

    onRequestStart: new signals.Signal(), 
    onRequestEnd: new signals.Signal(), 

    request: function(config) { 
     interceptor.onRequestStart.dispatch(); 
     return config; 
    }, 

    requestError: function(rejection) { 
     interceptor.onRequestEnd.dispatch(); 
     return $q.reject(rejection); 
    }, 

    response: function(response) { 
     interceptor.onRequestEnd.dispatch(); 
     return response; 
    }, 

    responseError: function(rejection) { 
     interceptor.onRequestEnd.dispatch(); 
     return $q.reject(rejection); 
    } 

}; 

return interceptor; 
}); 

И это мой прелоадер директива:

angular.module("offersApp").directive("preloader", function ($timeout, preloaderInterceptor) { 
    "ngInject"; 
    return { 
     template: '<div id="preloader"><div class="loading"></div></div>', 
     replace: true, 
     restrict: "EA", 
     scope: {}, 

     link: function (scope, element, attrs, ctrl) { 

      var showPreloader = function() { 
       element.css({display: 'block', opacity: 1}); 
      } 

      var hidePreloader = function() { 
       element.css({opacity: 0}); 
       var promise = $timeout(function() { 
        element.css({display: 'none'}); 
       }, 600); 
      } 

      preloaderInterceptor.onRequestStart.add(showPreloader); 
      preloaderInterceptor.onRequestEnd.add(hidePreloader); 
     } 
    }; 
});