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

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

Comments

मुझे लगता है कि यह एक बेहतर समाधान है क्योंकि यह आपके कोड को छोटा करने के बाद भी काम करता है।

— 22

मुझे वापसी {} से पहले '_myData = myData' जोड़ना था और फिर लिंक फ़ंक्शन के अंदर ऑब्जेक्ट को _myData के रूप में संदर्भित करना था।

— Jelling

धन्यवाद @ जैलिंग। मुझे भी यही काम करना था। मुझे आश्चर्य है कि अगर वहाँ कोई भी हमें बता सकता है क्यों ...?

— sfletche

निर्देश में $ संकलन करने के लिए कोई विशेष कारण? यह कहीं भी इस्तेमाल नहीं किया जा रहा है।

— ग्रू

यदि आप निर्देश कॉल के बाहर लिंक फ़ंक्शन बनाना चाहते हैं तो क्या इंजेक्शन लगाने का कोई समाधान है?

— थिंकबोनोबो

Answer 2

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

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

http://plnkr.co/edit/M8omDEjvPvBtrBHM84Am

Comments

क्या आप कृपया एक उदाहरण प्रदान कर सकते हैं

— अपवाद

@ अपवाद क्या आप अपने कोड को एक बेला में डाल सकते हैं? मैं देख सकता हूं और देख सकता हूं कि आपका कोड काम क्यों नहीं कर रहा है और संभवत: इसे ठीक करने में आपकी मदद करेगा।

— गनाराज

@Exception ने एक वर्किंग प्लंक जोड़ा, जो काम करने वाले कोड को दिखाता है।

— गणराज

मैंने अभी कुछ खोजा है: यदि आप फ़ंक्शन मापदंडों में एक इंजेक्शन को परिभाषित function($location) { ...करते हैं , लेकिन वास्तव $locationमें फ़ंक्शन के अंदर नहीं आते हैं, तो AngularJS इंजेक्शन का प्रदर्शन नहीं करेगा। केवल एक बार जब आप इस व्यवहार को नोटिस करेंगे, तो डिबगर के अंदर है।

— वाल्टर स्टबोज़

मुझे यकीन नहीं है कि मैं आपकी "युग्मित" टिप्पणी से सहमत हूं। हम पहले से ही विश्व स्तर पर नियंत्रक और सेवा को जोड़ते हैं - हम क्रमिक रूप से रनटाइम पर सेवा के कार्यान्वयन को प्रतिस्थापित नहीं कर सकते। जिसका मतलब है कि सिंगल कंट्रोलर को सिंगल सर्विस मिलती है। हालाँकि - निर्देशों में पृष्ठ पर प्रति टैग के लिए अलग-अलग कॉन्फ़िगरेशन है, इसलिए संभवतः हम अलग-अलग सेवा को अलग-अलग निर्देश इंस्टेंसेस में सक्षम करते हैं। मुझे लगता है यह कम decoupled है।

— पुरुष मोगरेबी

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
)

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