Tôi có thể đưa dịch vụ vào chỉ thị không?

Question

Tôi 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 xem xét mã và cho tôi biết nếu tôi đang làm điều gì đó sai?

Answer 1

Bạn có thể làm tiêm vào Chỉ thị, và nó trông giống như nó hiện ở khắp mọi nơi khác.

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

Answer 2

Thay đổi định nghĩa chỉ thị của bạn từ app.module thành app.directive. Ngoài ra mọi thứ đều ổn. Btw, rất hiếm khi bạn phải tiêm dịch vụ vào chỉ thị. Nếu bạn đang tiêm một dịch vụ (thường là một 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 một khung nhìn), thì bạn đang tạo một sự ghép nối trực tiếp giữa khung nhìn và mô hình của bạn. 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 bạn đang làm gì sai. Đây là một plunk của nó làm việc.

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Answer 3

Bạn cũng có thể sử dụng dịch vụ $ inject để 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 chỉ thị sẽ cắm một bảng vào một điểm cuối ngResource hoặc một nút xóa bản ghi chung mà tương tác với bất kỳ điểm kết thúc 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) 

tại dịch vụ 'vô danh' của bạn là hoàn toàn có sẵn. Nếu đó là ngResource ví dụ sau đó bạn có thể sử dụng giao diện ngResource tiêu chuẩn để có được dữ liệu của bạn

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 đã tìm thấy kỹ thuật này là rất hữu ích khi thực hiện các yếu tố tương tác với thiết bị đầu cuối API đặc biệt .