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

Question

Я изучаю, как создавать пользовательские директивы.

Моя служба выглядит следующим образом:

myApp.service('myService',function(){ 
    this.myFunction=function(myParam){ 
     // do something 
    } 
}); 

Вот моя директива:

myApp.directive('myDirective',function(myService){ 
    return { 
     restrict: 'E', 
     scope: { 
      param: '=myParam', 
     }, 
     template: '<button ng-click="myService.myFunction(param)">Do action</button>', 
    } 
}); 

В HTML, когда я использую <my-directive my-param="something"></my-directive> он правильно делает, как кнопка. Однако, когда я нажимаю на него, myService.myFunction, не выполняется.

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

Answer 1

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

myApp.directive('myDirective',function(myService){ 
    return { 
     restrict: 'E', 
     scope: { 
      param: '=myParam', 
     }, 
     template: '<button ng-click="callService(param)">Do action</button>', 
     link: function(scope, element, attrs) { 
      scope.callService = function() { 
       myService.myFunction(); 
      } 
     } 
    } 
}); 

Answer 2

Это не работает, потому что в вашем примере директива фактически не знает, что это myService. Вы должны явно вводить его .: например

myApp.directive('myDirective', ['myService', function(myService){ ... }]); 

Смотрите также это question или это question.

Answer 3

Вы можете вводить услугу в контроллере, а затем вызвать эту функцию внутри шаблона:

Inject myService в контроллер:

myApp.controller("ctrl", function($scope, myService) { 
    $scope.doService = function(myParam) { 
     return myService.myFunction(myParam); 
    }; 
}); 

вызова doService метод контроллера внутри шаблона:

myApp.directive('myDirective',function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      param: '=myParam', 
     }, 
     template: '<button ng-click="doService(param)">Do action</button>', 
    } 
}); 

Answer 4

Вы должны использовать контроллер для выполнения всех модификаций DOM.
Смотрите эту plunkr: https://plnkr.co/edit/HbfD1EzS0av5BG6NgtIv?p=preview

.directive('myFirstDirective', [function() { 
    return { 
    'restrict': 'E', 
    'controller': 'MyFirstController', 
    'controllerAs': 'myFirstCtrl', 
    'template': '<h1>First directive</h1><input type="text" ng-model="myFirstCtrl.value">' 
    }; 
}