2012-11-15 8 views
6

मैं AngularJS 1.0.2 का उपयोग कर रहा jQuery 1.8.2 के साथ के लिए करता है और मैं AngularJS वस्तुओं में निर्भरता इंजेक्षन, जैसे कि यह नियंत्रकों के लिए करता है करने के लिए कोशिश कर रहा हूँ। आप jsFiddle पर एक मूल उदाहरण पा सकते हैं, वहां आपको दो नियंत्रक (List और NewItem), एक ऑब्जेक्ट (Item) और सेवा के साथ एक मॉड्यूल (services और communication क्रमशः) मिलेगा।AngularJS वस्तुओं में निर्भरता इंजेक्षन की तरह यह पहले से ही नियंत्रकों

मेरे समस्या Item साथ है:

self.pretty = function() { 
    return self.name + ": " + $filter("currency")(self.price); 
}; 
:

var Item = function (name, price) { 
    var self = this; 

    self.name = name; 
    self.price = price; 

    self.pretty = function() { 
     return self.name + ": " + self.price; 
    }; 
}; 

यह में मैं बाहर कुछ चीजें उपयोग करने के लिए, मान लीजिए कि मैं pretty विधि एक मुद्रा-अवगत स्ट्रिंग के लिए price संपत्ति स्वरूपित करना चाहते हैं जाने की जरूरत है

लेकिन यह काम नहीं करेगा, क्योंकि $filter परिभाषित नहीं किया गया है। (मन आप, $filter के उपयोग केवल एक उदाहरण है, यह कुछ भी हो सकता है।)

और var Item = function (name, price) {var Item = function ($filter, name, price) { को संशोधित करने, भी काम नहीं करेगा के रूप में यह AngularJS जो वस्तु (बनाने है नियंत्रकों के मामले में नहीं है), यह मैं हूँ।

तो, मैं AngularJS मेरे लिए ऑब्जेक्ट कैसे बना सकता हूं, या मुझे निर्भरता को हल करने की आवश्यकता है?

var item = angular.create(Item, $scope.name, $scope.price); या var item = new Item(angular.inject("filter"), $scope.name, $scope.price); मुझे लगता है कि जैसे कुछ ...

उत्तर

16

यह अपनी खुद की वस्तुओं का दृष्टांत (और उन्हें में निर्भरता इंजेक्षन!) $injector सेवा और इसके instantiate(Type, locals) विधि का उपयोग कर के लिए AngularJS पूछने के लिए संभव है।

उदाहरण के लिए

, इस तरह एक निर्माता दिया:

var Item = function ($filter, name, price) { 
    var self = this; 

    self.name = name; 
    self.price = price; 

    self.pretty = function() { 
     return $filter('json')(self); 
    }; 
}; 

एक तो जैसे Item का एक उदाहरण बना सकते हैं:

var item = $injector.instantiate(Item, { name: $scope.name, price: $scope.price }); 

कृपया ध्यान दें कि instantiate विधि 2 तर्कों स्वीकार करता है:

  • टाइप: एक कन्स्ट्रक्टर फ़ंक्शन।
  • स्थानीय: को इंजेक्शन नहीं दिया जाना चाहिए बल्कि इसके रूप में लिया जाना चाहिए।

यहां working jsFiddle (प्रारंभिक एक का सरलीकृत संस्करण) है।

+2

यह वही है जो मैं ढूंढ रहा था। मैंने * $ इंजेक्टर 'दस्तावेज़ पृष्ठ पर देखा था, लेकिन' तत्काल (प्रकार, स्थानीय) 'याद किया ... आह ... – Albireo