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있습니다. 누군가 코드를 살펴보고 내가 잘못하고 있는지 말해 줄 수 있습니까?

답변

지시어에 주입 할 수 있으며 다른 곳과 마찬가지로 보입니다.

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

답변

지시문 정의를에서 app.module로 변경하십시오 app.directive. 그 외에도 모든 것이 잘 보입니다.

Btw, 지시문에 서비스를 주입 해야하는 경우는 거의 없습니다. 서비스 (보통 데이터 소스 또는 모델)를 지시문 (보기의 일부)에 주입하는 경우 뷰와 모델 사이에 직접 연결이 작성됩니다. 컨트롤러를 사용하여 서로 배선하여 분리해야합니다.

잘 작동합니다. 나는 당신이 무엇을하고 있는지 잘 모르겠습니다. 여기에 많은 것들이 작동합니다.

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

답변