AngularJS의 디렉티브에 서비스를 삽입할 수 있습니까?

AngularJS의 디렉티브에 서비스를 삽입할 수 있습니까?

다음과 같은 명령어에 서비스를 삽입하려고 합니다.

 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누가 코드를 보고 제가 잘못하고 있는지 알려주시겠어요?

Directives에 주입할 수 있으며 다른 모든 곳에서 주입할 수 있는 것처럼 보입니다.

app.directive('changeIt', ['myData', function(myData){
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            scope.name = myData.name;
        }
    }
 }]);

지시어 정의를 변경하다app.module로.app.directive그것만 빼면 다 괜찮아 보여요. 그나저나 지시문에 서비스를 투입할 필요는 거의 없어요. 지시문(뷰의 일부)에 서비스(일반적으로 데이터 소스 또는 모델)를 삽입하는 경우 뷰와 모델 간에 직접 결합을 작성합니다. 컨트롤러로 배선하여 분리해야 합니다.

그것은 잘 작동한다.나는 네가 무엇을 하고 있는지 무엇이 잘못되었는지 모르겠다.여기 그것의 펑크가 작동한다.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

$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 엔드포인트와 상호작용하는 요소를 만들 때 매우 유용하다는 것을 알게 되었습니다.

디렉티브를 개별 모듈로 사용하는 경우 다음과 같이 서비스를 Import해야 합니다.

    app.module('ChangeItDirective',['myData'])
     .directive('changeIt', ['myData', function(myData){
       return {
         restrict: 'C',
         link: function (scope, element, attrs) {
            scope.name = myData.name;
         }
        }
     }]);

그렇지 않으면 다음과 같습니다.

    app.directive('changeIt', ['myData', function(myData){
       return {
         restrict: 'C',
         link: function (scope, element, attrs) {
            scope.name = myData.name;
         }
        }
     }]);

언급URL : https://stackoverflow.com/questions/15569168/can-i-inject-a-service-into-a-directive-in-angularjs