Tôi có thể tiêm dịch vụ vào chỉ thị trong AngularJS không?

Tôi đang cố gắng tiêm một dịch vụ vào một chỉ thị như dưới đây:

 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;
            }
        }
 });

Nhưng điều này đang trả lại cho tôi một lỗi Unknown provider: myDataProvider. Ai đó có thể vui lòng nhìn vào mã và cho tôi biết nếu tôi đang làm gì sai?

Bạn có thể thực hiện tiêm trên Chỉ thị, và có vẻ như nó làm ở mọi nơi khác.

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

Thay đổi định nghĩa chỉ thị của bạn từ app.moduleđến app.directive. Ngoài ra mọi thứ có vẻ tốt. Btw, rất hiếm khi bạn phải tiêm dịch vụ vào một chỉ thị. Nếu bạn đang đưa một dịch vụ (thường là nguồn dữ liệu hoặc mô hình) vào chỉ thị của bạn (là một phần của chế độ xem), bạn đang tạo một khớp nối trực tiếp giữa chế độ xem và mô hình của mình. Bạn cần tách chúng ra bằng cách nối chúng lại với nhau bằng bộ điều khiển.

Nó hoạt động tốt. Tôi không chắc chắn những gì bạn đang làm đó là sai. Đây là một plunk của nó làm việc.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Bạn cũng có thể sử dụng dịch vụ $ chích để nhận bất kỳ dịch vụ nào bạn thích. Tôi thấy hữu ích nếu tôi không biết tên dịch vụ trước thời hạn nhưng biết giao diện dịch vụ. Ví dụ, một lệnh sẽ cắm một bảng vào điểm cuối ngResource hoặc nút xóa bản ghi chung tương tác với bất kỳ điểm cuối api nào. Bạn không muốn thực hiện lại chỉ thị bảng cho mọi bộ điều khiển hoặc nguồn dữ liệu.

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)

bây giờ dịch vụ 'ẩn danh' của bạn đã có sẵn. Nếu đó là ngResource chẳng hạn, thì bạn có thể sử dụng giao diện ngResource tiêu chuẩn để lấy dữ liệu của mình

Ví dụ:

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

Tôi đã thấy kỹ thuật này rất hữu ích khi tạo các phần tử tương tác với các điểm cuối API đặc biệt.