एंगुलरजेएस - डायरेक्टिव वैल्यू के अंदर इनपुट परिवर्तन

Question

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

HTML:

<div ng-app="myDirective"> 
    <input type="text" ng-model="test1" my-directive> 
    <input type="text" ng-model="test2"> 
</div> 

निर्देशक:

angular.module('myDirective', []) 
    .directive('myDirective', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      scope.$watch(attrs.ngModel, function (v) { 
       console.log('New Value from field 1: ' + v); 
       //console.log('New Value from field 2: ' + ???); 
      }); 
     } 
    }; 
}); 

Answer 1

चूंकि आपका निर्देश नया स्कोप नहीं बनाता है, इसलिए scope निर्देशक के लिंक विधि के अंदर परिवर्तनीय दो इनपुट वाले बाहरी दायरे को इंगित करता है। तो अगर आप की जगह ले सकता:

//console.log('New Value from field 2: ' + ???); 

साथ

console.log('New Value from field 2: ' + scope.test2); 

जब परीक्षण दूसरे इनपुट में कुछ डेटा दर्ज करना सुनिश्चित करें या इसे undefined प्रिंट होगा।

Here is a working fiddle

---

संपादित:

<input type="text" ng-model="test1" my-directive="test2"> 
<input type="text" ng-model="test2"> 

अंतर अब यहाँ से गुजर रहा है: यदि आप अपने निर्देश में गुंजाइश को अलग उपयोग करने की आवश्यकता थी, तो आप अपने HTML में निम्न कर सकता है test2 निर्देश में मॉडल, और scope संपत्ति जोड़कर अपने निर्देश में बाध्यकारी स्थापित करना:

scope: { 
    otherInput: '=myDirective' 
    // this tells the directive to bind the local variable `otherInput` 
    // to whatever the `my-directive` attribute value is. In this case, `test2` 
}, 

यह आपको अपने निर्देश में पारित मूल्यों तक पहुंचने की अनुमति देता है। इस प्रकार तब आप अपने $watch तों बदल जाएगा:

scope.$watch(attrs.ngModel, function (v) { 
    console.log('New Value from field 1: ' + v); 
    console.log('New Value from field 2: ' + scope.otherInput); 
}); 

// notice the syntax for watching a scope variable 
scope.$watch('otherInput', function (v) { 
    console.log('New Value from field 1: ' + scope.test1); 
    console.log('New Value from field 2: ' + v); 
}); 

मैं एक और उदाहरण, test3 और test4 के रूप में मेरे बेला में शामिल किया गया है।

Answer 2

मैं विस्तार से बताया जा सकता था किया है कि पाठ में है, लेकिन मुझे लगता है कि यह बहुत अच्छा होगा यदि आप john lindquist द्वारा इन 3 वीडियो देखें:

• Isolate Scope "@"
• Isolate Scope "="
• Isolate Scope "&"

और summary।

वे वास्तव में छोटे (~ 4min प्रत्येक) हैं लेकिन बहुत ही सरल और उपयोगी हैं।

पीएस: वैसे, मैं आपको दूसरों को भी देखने की सलाह देता हूं। वे सभी छोटे और सटीक हैं, उन्हें प्यार करते हैं।

Answer 3

AngularJS निर्देश आप अलग अलग तरीकों के साथ गुंजाइश उपयोग करने के लिए और कई चीज़ें हैं जो आप कर need.You नहीं इनहेरिट के रूप में अपने दायरे का उपयोग कर सकते, पृथक वारिस और हैं.यदि आप गुंजाइश का उपयोग के रूप में अलग है, तो आप चर और बाँध पारित कर सकते हैं देता है जहां भी आप चाहते हैं।

यहाँ उदाहरण के साथ 2 शांत लेख है, जो आपकी मदद कर सकते हैं

http://www.w3docs.com/snippets/angularjs/change-variable-from-outside-of-directive.html

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html