Могу ли я добавить сервис в директиву?

217

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

 var app = angular.module('app',[]);
 app.factory('myData', function(){
     return {
        name : "myName"
     }
 });
 app.directive('changeIt',function($compile, myData){
    return {
            restrict: 'C',
            link: function (scope, element, attrs) {
                scope.name = myData.name;
            }
        }
 });

Но это возвращает мне ошибку Unknown provider: myDataProvider. Может кто-нибудь, пожалуйста, загляните в код и скажите мне, что я делаю что-то неправильно?

Теги:

3 ответа

361
Лучший ответ

Вы можете делать инъекции по директивам, и это выглядит так же, как и везде.

app.directive('changeIt', ['myData', function(myData){
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            scope.name = myData.name;
        }
    }
 }]);
Поделиться
  • 12
    Я думаю, что это лучшее решение, потому что оно работает даже после минимизации вашего кода.
  • 5
    Мне пришлось добавить _myData = myData до возврата {}, а затем ссылаться на объект как _myData внутри функции ссылки.
Показать ещё 5 комментариев
17

Измените определение директивы от app.module до app.directive. Кроме того, все выглядит хорошо. <Удаp > Кстати, очень редко вам приходится вводить услугу в директиву. Если вы вводите службу (которая обычно является источником данных или моделью) в вашу директиву (которая является частью части представления), вы создаете прямую связь между вашим представлением и моделью. Вы должны их разделить, проводя их вместе с помощью контроллера. Забастовкa >

Он работает нормально. Я не уверен, что вы делаете, что неправильно. Вот его работа.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Поделиться
  • 0
    Можете ли вы привести пример, пожалуйста
  • 0
    @Exception Можете ли вы поместить свой код в скрипку? Я могу взглянуть и понять, почему ваш код не работает, и, вероятно, помочь вам исправить это.
Показать ещё 5 комментариев
9

Вы также можете использовать службу $inject, чтобы получить любую услугу. Я считаю, что это полезно, если я не знаю имя службы раньше времени, но знаю интерфейс службы. Например, директива, которая будет подключать таблицу к конечной точке ngResource или общей кнопке удаления записи, которая взаимодействует с любой конечной точкой api. Вы не хотите переопределять директиву таблицы для каждого контроллера или источника данных.

template.html

<div my-directive api-service='ServiceName'></div>

my-directive.directive.coffee

angular.module 'my.module'
  .factory 'myDirective', ($injector) ->
    directive = 
      restrict: 'A'
      link: (scope, element, attributes) ->
        scope.apiService = $injector.get(attributes.apiService)

теперь ваш анонимный сервис полностью доступен. Если это ngResource, например, вы можете использовать стандартный интерфейс ngResource для получения ваших данных

Например:

scope.apiService.query((response) ->
  scope.data = response
, (errorResponse) ->
  console.log "ERROR fetching data for service: #{attributes.apiService}"
  console.log errorResponse.data
)

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню