क्या मैं निर्देश में एक सेवा इंजेक्ट कर सकता हूं?

Question

मैं एक निर्देश में नीचे की तरह एक सेवा इंजेक्षन करने की कोशिश कर रहा हूँ:

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 लौटा रहा है। क्या कोई कोड को देख सकता है और मुझे बता सकता है कि क्या मैं कुछ गलत कर रहा हूं?

Answer 1

आप निर्देशों पर इंजेक्शन कर सकते हैं, और यह जैसे यह अन्य सभी स्थानों करता लग रहा है।

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

Answer 2

app.module से app.directive पर अपनी निर्देश परिभाषा बदलें। इसके अलावा सबकुछ ठीक दिखता है। बीटीडब्ल्यू, आपको शायद ही कभी निर्देश में एक सेवा इंजेक्ट करना है। यदि आप अपने निर्देश (जो आमतौर पर एक दृश्य का हिस्सा है) में एक सेवा इंजेक्शन कर रहे हैं (जो आम तौर पर डेटा स्रोत या मॉडल है), तो आप अपने दृश्य और मॉडल के बीच सीधा युग्मन बना रहे हैं। आपको नियंत्रक का उपयोग करके उन्हें एक साथ तारों से अलग करने की आवश्यकता है।

यह ठीक काम करता है। मुझे यकीन नहीं है कि आप क्या कर रहे हैं जो गलत है। यहां काम करने का एक हिस्सा है।

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Answer 3

आप जो भी सेवा चाहते हैं उसे पाने के लिए आप $ इंजेक्ट सेवा का भी उपयोग कर सकते हैं। मुझे यह उपयोगी लगता है अगर मैं समय से पहले सेवा नाम नहीं जानता लेकिन सेवा इंटरफेस को जानता हूं। उदाहरण के लिए एक निर्देश जो किसी तालिका को एनजीआरसोर्स एंड पॉइंट या एक जेनेरिक डिलीट-रिकॉर्ड बटन में प्लग करेगा जो किसी भी एपीआई एंड पॉइंट के साथ इंटरैक्ट करता है। आप प्रत्येक नियंत्रक या डेटा-स्रोत के लिए तालिका निर्देश को पुन: कार्यान्वित नहीं करना चाहते हैं।

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 
) 

मैं इस तकनीक पाया है जब तत्वों कि एपीआई अंतिमबिंदुओं विशेष रूप से के साथ बातचीत कर रही है बहुत उपयोगी हो करने के लिए ।