AngularJS можно ли использовать сервис, который был введен через область HTML напрямую? - PullRequest
Новая
       27

AngularJS можно ли использовать сервис, который был введен через область HTML напрямую?

0 голосов
/ 05 ноября 2018

У меня есть эта директива: 

app.directive("saveButton", ($rootScope, ConfirmationModal) => {
  return {
    templateUrl: "/structure/header/components/save-button/save-button.html",
    scope: true,
    link: function($scope, element, attrs) {

      $scope.ConfirmationModal = ConfirmationModal;

    }
  }
});

И у меня есть этот HTML-шаблон директивы: 

<button ng-click="ConfirmationModal.default()">
  Click here
</button>

Выше работает, но обратите внимание, что в файле директивы JS Я прикрепил услугу к объему: $scope.ConfirmationModal = ConfirmationModal;.

У меня вопрос: возможно ли сделать службу доступной без вложения?

1 Ответ

0 голосов
/ 05 ноября 2018

Прежде всего, я думаю, что вы не должны использовать услуги напрямую. Я думаю, что angular way больше подходит для использования сервисов внутри контроллера / компонента.

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

Но, если вы действительно не хотите связывать это здесь, вы не можете связать это в родительском контроллере / компоненте. По умолчанию директива наследует родительский $ scope, поэтому вы можете связать его один раз с родительским, все внутри этой родительской (контроллер или компонент) директивы saveButton также будут иметь ее. 

angular.module('docsIsolateScopeDirective', [])
 .controller('ParentController', ['$scope','ConfirmationModal' function($scope, ConfirmationModal) {
 $scope.ConfirmationModal = ConfirmationModal;
}])
.directive('myCustomer', function() {
  return {
    templateUrl: '/structure/header/components/save-button/save-button.html'
  };
});

Кроме того, вы можете передать определенную переменную области видимости директиве так: 

scope: {
  ConfirmationModal: '=ConfirmationModal'
},

И вы передаете это от родителя 

save-button(confirmation-modal="$ctrl.confirmationModal")

В общем, я бы порекомендовал использовать здесь директиву component over, так как это 'statefull', и это было бы гораздо удобнее. Затем используйте Сервис внутри контроллера компонента. И используйте что-то вроде функции submit () и вызова службы внутри контроллера, и привязывайте к области видимости только этот submit.

Надеюсь, это поможет, Приветствия.

Рекомендации: https://docs.angularjs.org/guide/directive

...