angularjs-directive - कस्टम निर्देश के दायरे में बाध्यकारी '@', '&', '=' और '>' का उपयोग बाध्यकारी: AngularJS





angularjs-scope (5)


एंगुलरजेएस निर्देश में दायरा आपको उस तत्व के गुणों में डेटा तक पहुंचने की अनुमति देता है जिस पर निर्देश लागू होता है।

यह एक उदाहरण के साथ सबसे अच्छा चित्रित किया गया है:

<div my-customer name="Customer XYZ"></div>

और निर्देश परिभाषा:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

जब scope संपत्ति का उपयोग किया जाता है तो निर्देश तथाकथित "पृथक क्षेत्र" मोड में होता है, जिसका अर्थ है कि यह सीधे माता-पिता नियंत्रक के दायरे तक नहीं पहुंच सकता है।

बहुत सरल शब्दों में, बाध्यकारी प्रतीकों का अर्थ है:

someObject: '=' (दो-तरफा डेटा बाध्यकारी)

someString: '@' (डबल घुंघराले ब्रेसिज़ नोटेशन {{}} साथ सीधे या इंटरपोलेशन के माध्यम से पारित)

someExpression: '&' (जैसे hideDialog() )

यह जानकारी AngularJS निर्देश दस्तावेज़ पृष्ठ में मौजूद है, हालांकि कुछ हद तक पूरे पृष्ठ में फैली हुई है।

प्रतीक > वाक्यविन्यास का हिस्सा नहीं है।

हालांकि, < AngularJS घटक बाइंडिंग के हिस्से के रूप में मौजूद है और इसका मतलब है कि एक तरफ बाध्यकारी है।

मैंने AngularJS में कस्टम निर्देशों के कार्यान्वयन में इन प्रतीकों के उपयोग के बारे में बहुत कुछ पढ़ा है लेकिन अवधारणा अभी भी मुझे स्पष्ट नहीं है। मेरा मतलब है, अगर मैं कस्टम निर्देश में किसी एक दायरे के मूल्यों का उपयोग करता हूं तो इसका क्या अर्थ है?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

हम यहां दायरे के साथ क्या कर रहे हैं?

मुझे यह भी यकीन नहीं है कि "स्कोप: '>'" आधिकारिक दस्तावेज में मौजूद है या नहीं। यह मेरे प्रोजेक्ट में इस्तेमाल किया गया है।

संपादित करें -1

"स्कोप: '>' ' का उपयोग मेरी परियोजना में एक मुद्दा था और इसे ठीक कर दिया गया है।




<: एक तरफा बाध्यकारी

=: दो तरफा बाध्यकारी

और: कार्य बाध्यकारी

@: केवल तारों को पास करें




> दस्तावेज में नहीं है।

< एक तरफा बाध्यकारी के लिए है।

@ बाध्यकारी तार पारित करने के लिए है। ये स्ट्रिंग इंटरपोलेटेड मानों के लिए {{}} अभिव्यक्ति का समर्थन करते हैं।

= बाध्यकारी दो-तरफा मॉडल बाध्यकारी के लिए है। पैरेंट स्कोप में मॉडल निर्देश के अलग-अलग दायरे में मॉडल से जुड़ा हुआ है।

& बाध्यकारी आपके निर्देश के दायरे में एक विधि को पारित करने के लिए है ताकि इसे आपके निर्देश में बुलाया जा सके।

जब हम स्कोप सेट कर रहे हैं: निर्देश में सही, कोणीय जेएस उस निर्देश के लिए एक नया दायरा बनाएगा। इसका मतलब है कि निर्देश दायरे में किए गए कोई भी बदलाव माता-पिता नियंत्रक में वापस प्रतिबिंबित नहीं होंगे।




निर्देशों पर AngularJS दस्तावेज प्रतीक के मतलब के लिए बहुत अच्छी तरह लिखा गया है।

स्पष्ट होने के लिए, आप बस नहीं हो सकते हैं

scope: '@'

निर्देश परिभाषा में। आपके पास ऐसी संपत्तियां होनी चाहिए जिनके लिए बाइंडिंग लागू हों, जैसे:

scope: {
    myProperty: '@'
}

मैं दृढ़ता से सुझाव देता हूं कि आप साइट पर दस्तावेज़ और ट्यूटोरियल पढ़ लें। पृथक क्षेत्रों और अन्य विषयों के बारे में जानने के लिए आपको और अधिक जानकारी चाहिए।

scope के मूल्यों के संबंध में उपर्युक्त पृष्ठ से प्रत्यक्ष उद्धरण यहां दिया गया है:

दायरा संपत्ति सच हो सकती है, एक वस्तु या झूठा मूल्य:

  • झूठा : निर्देश के लिए कोई गुंजाइश नहीं बनाई जाएगी। निर्देश अपने माता-पिता के दायरे का उपयोग करेगा।

  • true : एक नया बच्चा गुंजाइश जो उसके माता-पिता से प्रोटोटाइपिक रूप से विरासत में आता है, निर्देश के तत्व के लिए बनाया जाएगा। यदि एक ही तत्व पर कई निर्देश एक नए दायरे का अनुरोध करते हैं, तो केवल एक नया दायरा बनाया जाता है। नया स्कोप नियम टेम्पलेट की जड़ के लिए लागू नहीं होता है क्योंकि टेम्पलेट की जड़ हमेशा एक नया दायरा प्राप्त करती है।

  • {...} (एक ऑब्जेक्ट हैश) : निर्देश के तत्व के लिए एक नया "पृथक" दायरा बनाया गया है। 'पृथक' गुंजाइश सामान्य दायरे से अलग है जिसमें यह प्रोटोटाइपिक रूप से अपने मूल दायरे से प्राप्त नहीं होता है। पुन: प्रयोज्य घटकों को बनाते समय यह उपयोगी होता है, जो मूल दायरे में डेटा को गलती से पढ़ या संशोधित नहीं करना चाहिए।

https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ संकलन # -स्कोप- से 2017-02-13 को पुनर्प्राप्त किया गया, सीसी-बाय-एसए 3.0 के रूप में लाइसेंस प्राप्त




मैं @Scott Driscoll उत्तर में जावास्क्रिप्ट के साथ प्रोटोटाइपिकल विरासत का एक उदाहरण जोड़ना चाहता हूं। हम Object.create () के साथ शास्त्रीय विरासत पैटर्न का उपयोग करेंगे जो एक्मास्क्रिप्ट 5 विनिर्देश का एक हिस्सा है।

सबसे पहले हम "अभिभावक" ऑब्जेक्ट फ़ंक्शन बनाते हैं

function Parent(){

}

फिर "पैरेंट" ऑब्जेक्ट फ़ंक्शन में प्रोटोटाइप जोड़ें

 Parent.prototype = {
 primitive : 1,
 object : {
    one : 1
   }
}

"चाइल्ड" ऑब्जेक्ट फ़ंक्शन बनाएं

function Child(){

}

बाल प्रोटोटाइप असाइन करें (बाल प्रोटोटाइप को पैरेंट प्रोटोटाइप से प्राप्त करें)

Child.prototype = Object.create(Parent.prototype);

उचित "चाइल्ड" प्रोटोटाइप कन्स्ट्रक्टर असाइन करें

Child.prototype.constructor = Child;

बाल प्रोटोटाइप में विधि "परिवर्तनप्रॉप" जोड़ें, जो बाल वस्तु में "आदिम" संपत्ति मान को फिर से लिख देगा और बाल और अभिभावक वस्तुओं में "object.one" मान को बदल देगा

Child.prototype.changeProps = function(){
    this.primitive = 2;
    this.object.one = 2;
};

अभिभावक (पिता) और बच्चे (बेटे) वस्तुओं को शुरू करें।

var dad = new Parent();
var son = new Child();

कॉल चाइल्ड (बेटा) परिवर्तनप्रॉप विधि

son.changeProps();

परिणाम जांचें।

अभिभावक आदिम संपत्ति नहीं बदली

console.log(dad.primitive); /* 1 */

बाल आदिम संपत्ति बदल दी (पुनः लिखा)

console.log(son.primitive); /* 2 */

अभिभावक और बाल वस्तु। एक गुण बदल गया

console.log(dad.object.one); /* 2 */
console.log(son.object.one); /* 2 */

यहां उदाहरण का काम http://jsbin.com/xexurukiso/1/edit/

Object.create पर अधिक जानकारी https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/create





angularjs angularjs-directive angularjs-scope