Как активировать директиву блесны из сервиса - PullRequest
Новая
       34

Как активировать директиву блесны из сервиса

0 голосов
/ 15 марта 2019

Как использовать директиву AngularJS внутри службы AngularJS?

В моем приложении AngularJS 1.5 у меня есть директива, которая отображает счетчик в центре вида.Я хотел бы иметь возможность активировать этот счетчик с помощью службы.

Так, например, служба может быть введена в контроллер, и при каждом вызове она будет приводить к отображению счетчика на экране..

Как я могу внедрить эту директиву в сервис?

В настоящее время, куда бы я ни посмотрел, я могу найти только инструкции о том, как внедрить сервисы в директивы, но не наоборот

Ответы [ 2 ]

2 голосов
/ 15 марта 2019

Подход заключается в использовании события $ rootScope / $ scope bus: 

 app.service("dataService", function($rootScope, $http) {
     this.get = function() {
         $rootScope.$broadcast("dataService.Start");
         return $http.get(url).finally(function() {
             $rootScope.$broadcast("dataService.Done");
         });
     };
 })

В директиве: 

 app.directive("spinner", function() {
     return {
         link: postLink,
     };
     function postLink(scope, elem, attrs) {
         scope.$on("dataService.Start", function (event) {
             elem[0].startSpinner();
         });
         scope.$on("dataService.Done", function (event) {
             elem[0].stopSpinner();
         });
     }
});

Для получения дополнительной информации см. AngularJS Developer Guide - Распространение событий Scope

0 голосов
/ 16 марта 2019

Вы можете установить угловой спиннер затем включите файлы в ваш index.html и добавьте зависимости в ваше приложение: 

var myapp = angular.module('myapp', ['angularSpinner']);

тогда вы можете использовать пользовательскую директиву для перехвата всех http-запросов без добавления start перед каждым http-вызовом и остановки после (меньше кода) 

app.directive('usSpinner', ['$http', '$rootScope', function ($http, $rootScope) {
  return {
    link: function (scope, elm, attrs) {
      $rootScope.spinnerActive = false;
      scope.isLoading = function () {
        return $http.pendingRequests.length > 0;
      };

      scope.$watch(scope.isLoading, function (loading) {
        $rootScope.spinnerActive = loading;
        if (loading) {
          elm.removeClass('ng-hide');
        } else {
          elm.addClass('ng-hide');
        }
      });
    }
  };

}

Затем в своем HTML добавьте это к телу: 

<span us-spinner></span>
...