कोणीय प्रकाश। HTML में घोषणात्मक डेटा बाइंडिंग का प्रबंधन करना

DOM में जानकारी प्रदर्शित करने के लिए कोणीय के 2 उपकरण हैं - ये HTML {{मॉडल}} में निर्देश और घोषणात्मक डेटा बाइंडिंग हैं।
जबकि निर्देश बहुत शक्तिशाली हैं, घोषणात्मक बाध्यकारी थोड़ा सीमित है, यह फिल्टर और कॉल करने की क्षमता के साथ एक मॉडल पर $ घड़ी बनाता है, और बड़े, कि सभी। और मैं और अधिक लचीलापन चाहते हैं।

उदाहरण के लिए, यदि आप Angular.js के लिए बाइंडोंस लाइब्रेरी को देखते हैं , तो मुख्य विचार $ घड़ी का उपयोग किए बिना सूचना का एक बार का आउटपुट है।
और इसे किसी भी विशेषता के लिए कहीं भी उपयोग करने के लिए, डेवलपर ने कई अलग-अलग निर्देश दिए: बो-टेक्स्ट, बो-हाई-आई, बो-एचआरएफ, बो-एसकेवी-आई, बो-एसकेसी, बो- वर्ग, बो-ऑल, बो-टाइटल, बो-आईडी, बो-स्टाइल, बो-वैल्यू, बो-अटर और बो-अटर-फू । लेकिन वास्तव में, वे सभी एक ही काम करते हैं और तार्किक रूप से, यह एक निर्देश होना चाहिए।
यह Angular.js, अर्थात् में घोषित डेटा बाइंडिंग से भी विचलित होता है। के बजाय

<a href="{{link}}">{{name}}</a> 

लिखने की जरूरत है

 <a bo-href-i="{{link}}" bo-text="name"></a> 

यानी क्यों घोषणात्मक डेटा बाइंडिंग का आविष्कार किया गया था इस स्थिति में काम नहीं करता है।

इसलिए, घोषणात्मक डेटा बाइंडिंग के निर्देशों को लागू करने के लिए विचार आया।
यह कोणीय प्रकाश में कैसे काम करता है - आपको बस निर्देश नाम निर्दिष्ट करने की आवश्यकता है और इसके पहले "#" चिन्ह लगाएं। {{मॉडल}} के बजाय {{#directive मॉडल}} होगा ।
एक बेकार लेकिन सरल काउंटर उदाहरण:

 <div al-app> counter {{#counter model}} </div> 

हम "मॉडल" बाइंडिंग करते हैं और "काउंटर" निर्देश को कनेक्ट करते हैं, सादगी के लिए मैंने इस निर्देशन में "मॉडल" के उपयोग को छोड़ दिया है:

 alight.text.counter = function(callback, expression, scope, env) { var n = 0; setInterval(function(){ n++; callback(n) // set result scope.$scan() // $digest }, 1000); } 

निर्देश के इनपुट पर हम प्राप्त करते हैं:

• कॉलबैक - बाइंडिग स्थान पर पाठ भेजने में विफल रहता है
• अभिव्यक्ति - बंधन की इनपुट अभिव्यक्ति, इस मामले में यह "मॉडल" है
• गुंजाइश - वर्तमान स्कोप
• env - बाध्यकारी के "इंसाइड" का लिंक और कार्यक्षमता का विस्तार करने के लिए

यह कैसे काम करता है इसका एक उदाहरण

निम्नलिखित विशेषताओं में एक बाइंडिग डालने के साथ एक उदाहरण है, डायरेक्टिव लोडलॉगिनबायड जो सर्वर से डेटा लोड करने का "अनुकरण" करता है:

 <div al-app al-init="user_id = '555'"> id = <input type="text" al-value="user_id" /> <br/> into href = <a href="http://example.com/?search={{#loadLoginById user_id}}">user's page</a> <br/> into title = <span title="{{#loadLoginById user_id}}">user</a> <br/> into text = {{#loadLoginById user_id}} </div> 

उदाहरण

और अंत में, एक उदाहरण बिंदों के साथ, एक निर्देश जो बाँध-एक पुस्तकालय से 11 की जगह लेता है:

 <div al-app al-init="link = 'google.com'"> id = <input type="text" al-value="link" /> <br/> usual, with $watch = <a href="http://{{link}}">{{link}}</a> <br/> bindonce = <a href="http://{{#bindonce link}}">{{#bindonce link}}</a> <br/> aliase of bindonce = <a href="http://{{=link}}">{{=link}}</a> <br/> </div> 

उदाहरण

यदि सूचना के सुविधाजनक समापन के लिए घोषणात्मक बंधन को सोचा जाता है, तो इसका उपयोग क्यों नहीं किया जाता है?