2015-11-02 35 views
13

में एनजी-बाइंड बनाम एक बार बाध्यकारी के बीच क्या अंतर है कोणीय जेएस में "एनजी-बाइंड" और "वन टाइम बाइंडिंग" के बीच क्या अंतर है।कोणीय

यदि कोई अंतर है, तो मुझे उनमें से प्रत्येक का उपयोग क्यों करना चाहिए?

+2

एनजी-बाँध एक ही रास्ता नहीं है। प्रलेखन से: "ngBind विशेषता Angular को निर्दिष्ट HTML तत्व की टेक्स्ट सामग्री को किसी दिए गए अभिव्यक्ति के मान के साथ प्रतिस्थापित करने के लिए बताती है, और उस अभिव्यक्ति के मान में परिवर्तन होने पर पाठ सामग्री को अद्यतन करने के लिए।" – Noel

+0

@ नोएल; @JQueryKing। जानकारी के लिए धन्यवाद। मैंने "एक तरफा बाध्यकारी" को हटाने के लिए प्रश्न अपडेट किया है। – sam113

उत्तर

37

दो-तरफा डेटा बाइंडिंग

दो- AngularJS में जिस तरह से डेटा बाध्यकारी का मतलब है मॉडल से देखने के लिए बाध्यकारी डेटा और इसके विपरीत (डेटा को दायरे/नियंत्रक से दृश्य में और दृश्य से दायरे/नियंत्रक तक बहता है)। 'एनजी-मॉडल' दो-तरफा डेटा बाइंडिंग प्राप्त करने के लिए उपयोग किया जाने वाला एक कोणीय निर्देश है। स्कोप/कंट्रोलर से उस मॉडल में किए गए किसी भी संशोधन को दृश्य के लिए स्वचालित रूप से प्रचारित किया जाएगा, भले ही दृश्य अद्यतन डेटा मांग रहा हो और दृश्य से उस मॉडल में कोई भी संशोधन तुरंत स्कोप/नियंत्रक पर वापस दिखाई देगा।

एक-तरफ़ा बाध्यकारी डेटा

एक-तरफ़ा डेटा AngularJS में बाध्यकारी का मतलब देखने के लिए मॉडल से बाध्यकारी डेटा (डेटा देखने के लिए गुंजाइश/नियंत्रक से बहती है)। 'एनजी-बाइंड' एक कोणीय निर्देश है जो एक तरफा डेटा बाध्यकारी प्राप्त करने के लिए उपयोग किया जाता है।बाध्यकारी के बाद, उस मॉडल के दायरे/नियंत्रक से उस मॉडल में कोई भी संशोधन स्वचालित रूप से दृश्य के लिए प्रचारित किया जाएगा चाहे यह दृश्य अद्यतन डेटा के लिए पूछ रहा हो। दृश्य से नियंत्रक को मॉडल में किसी भी बदलाव के लिए कोई प्रचार नहीं होता है।

एक बार डेटा बाइंडिंग

कि इसके नाम से पता चलता है, बंधन होता है केवल एक बार, यानी, पहले पचाने चक्र में। एक बार बाध्यकारी पहले पाचन चक्र पर नियंत्रक द्वारा निर्धारित मूल्य से एक मॉडल या दृश्य को अद्यतन करने की अनुमति देता है। AngularJS 1.3 के रूप में, आप एक बार डेटा बाइंडिंग बनाने के लिए "::" टोकन का उपयोग कर सकते हैं। ये बाइंडिंग हैं जो मूल्य स्थिर होने के बाद अपने स्वयं के $ घड़ी() फ़ंक्शंस को खराब कर देते हैं (जिसका मूल रूप से मान परिभाषित किया जाता है)।

एक बार बाध्यकारी मानों के लिए उपयोग किया जाता है जो पृष्ठ स्थिर होने के बाद नहीं बदलेगा। "स्थिर" आमतौर पर इसका अर्थ है कि अभिव्यक्ति को एक मान सौंपा गया है। एक बार मान सेट हो जाने पर, नियंत्रक में मान में परिवर्तन तब तक प्रदर्शित मूल्य को नहीं बदलेगा जब तक पृष्ठ को पुनः लोड नहीं किया जाता है। वाक्यविन्यास {{:: अभिव्यक्ति}} है।

तो, उन मानों या सूचियों के लिए जो पृष्ठ स्थिर होने के बाद नहीं बदलेगा, हमेशा एक बार बाध्यकारी उपयोग करने का प्रयास करें। इससे हमारे आवेदन में अनावश्यक नजर रखने वालों की संख्या कम हो जाएगी।

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <div ng-repeat="customer in ::customers" > 
 
    {{::customer.name}} 
 
    ({{customer.address}}) 
 
     <button ng-click="change(customer)">Change</button> 
 
    </div> 
 
</div> 
 

 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.customers = [{ 
 
     name: 'Gloria Jane', 
 
     address: 'Silo Park, 9300 East Orchard Road, Greenwood Village, CO, 80114'},{ 
 
     name: 'Nicholas Michael', 
 
     address: 'Village Park, East Lake Avenue, Aurora, CO, 80016' 
 
    }]; 
 
    
 
    $scope.change = function(customer) { 
 
     customer.address = 'Cherry Creek State Park, 4201 S Parker Rd, Aurora, CO 80014, USA'; 
 
     customer.name ='Tessy Thomas'; 
 
    }; 
 
}); 
 
</script>

+0

अच्छा स्पष्टीकरण। धन्यवाद – RK6

+0

सबसे अच्छा जवाब समझाया ... बहुत बहुत धन्यवाद – RoHaN

2

दो-तरफा डेटा-बाइंडिंग

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

एक बार डेटा-बाइंडिंग

पहले, मैं बाहर बिंदु को यह नहीं एक तरह से डेटा-बाइंडिंग है सुनिश्चित हो करना चाहते हैं। ऐसी चीज वास्तव में कोणीय द्वारा प्रदान किए गए एक सम्मेलन के रूप में मौजूद नहीं है। एक बार बाध्यकारी पहले पाचन चक्र पर नियंत्रक द्वारा निर्धारित मूल्य से एक मॉडल या दृश्य को अद्यतन करने की अनुमति देता है।

+0

[लिंक] (http://kodypeterson.com/angularjs-the-3-types-of-data-binding/) जो आपने प्रदान किया है, मुझे जारी रखने के लिए एक वीडियो प्लेयर स्थापित करने के लिए कह रहा है। कृपया अपना उत्तर अपडेट करें। –

5

"एनजी-बाइंड" केवल कोणीयजेएस के नियमित {{अभिव्यक्ति}} वाक्यविन्यास का HTML विशेषता संस्करण है।

तो, <div ng-bind="productName"></div><div>{{productName}}</div> के बराबर है।

एक बार बाध्यकारी मानों के लिए उपयोग किया जाता है जो पृष्ठ स्थिर होने के बाद नहीं बदलेगा। "स्थिर" आमतौर पर इसका अर्थ है कि अभिव्यक्ति को एक मान सौंपा गया है। एक बार मान सेट हो जाने पर, नियंत्रक में मान में परिवर्तन तब तक प्रदर्शित मूल्य को नहीं बदलेगा जब तक पृष्ठ को पुनः लोड नहीं किया जाता है।

वाक्यविन्यास {{::expression}} है। उपर्युक्त उदाहरण के अनुसार, वाक्य रचना

<div>{{::productName}}</div> 

अगर एक पेज स्थिर है का निर्धारण किया जाता एल्गोरिथ्म के एक पूर्ण विवरण के यहां पाया जा सकता है:

https://docs.angularjs.org/guide/expression

7

इन परस्पर अनन्य अवधारणाओं नहीं हैं। आप एक बार एनजी-बाँध के साथ-साथ बाँध कर सकते हैं:

< div एनजी-बाँध = ":: productName" > </div >