Angularjs के बारे में उलझन में स्कॉप्स और बाइंडिंग अलग और अलग


Answers

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

Question

मैं सीमित दायरे वाले निर्देशों के संबंध में मॉडल और उनके बाइंडिंग के दायरे को समझने के लिए संघर्ष कर रहा हूं।

मुझे लगता है कि निर्देश पर दायरे को सीमित करना मतलब है कि नियंत्रक। $ स्कोप और directive.scope अब एक ही बात नहीं है। हालांकि, मैं इस बारे में उलझन में हूं कि मॉडलों को निर्देश टेम्पलेट के भीतर या एचटीएमएल में डेटा बाध्यकारी को कैसे प्रभावित करता है। मुझे लगता है कि मुझे कुछ मौलिक याद आ रही है और आगे बढ़ने के लिए मुझे इसे समझने की जरूरत है।

निम्नलिखित कोड लें (यहां बेवकूफ: http://jsfiddle.net/2ams6/ )

जावास्क्रिप्ट

var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
});
app.directive('testel', function(){
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        transclude: true,
        template:   '<div ng-transclude>'+
                    '<h3>Template title: {{title}}</h3>' +
                    '<h3>Template data.title:{{data.title}}</h3>' +
                    '</div>'
    }    
}); 

एचटीएमएल

<div ng-app='app'>
    <div ng-controller="Ctrl">
        <input ng-model="data.title">
        <testel title="{{data.title}}">
            <h3>Transclude title:{{title}}</span></h3>
            <h3>Transclude data.title:{{data.title}}</h3>
        </testel>
    </div>
</div>

मॉडल केवल टेम्पलेट के भीतर {{title}} अपडेट करता है, और {{data.title}} को {{data.title}} करता है। टेम्पलेट में {{title}} और न ही {{data.title}} क्यों {{title}} ?

इस तरह के स्थानांतरण के भीतर इनपुट को स्थानांतरित करना (यहां बेवकूफ: http://jsfiddle.net/eV8q8/1/ ):

<div ng-controller="Ctrl">
    <testel title="{{data.title}}">
        <input ng-model="data.title">
         <h3>Transclude title: <span style="color:red">{{title}}</span></h3>

         <h3>Transclude data.title: <span style="color:red">{{data.title}}</span></h3>

    </testel>
</div>

अब केवल {{data:title}} को स्थानांतरित करने का अर्थ अपडेट हो जाता है। क्यों टेम्पलेट {{title}} या {{data.title}} , और न ही {{title}} स्थानांतरित {{title}} ?

और अंत में, इनपुट को टेम्पलेट के भीतर ले जाना, जैसे कि (यहां बेवकूफ: http://jsfiddle.net/4ngmf/2/ ):

template: '<div ng-transclude>' +
            '<input ng-model="data.title" />' +
            '<h3>Template title: {{title}}</h3>' +
            '<h3>Template data.title: {{data.title}}</h3>' +
            '</div>'

अब इसका मतलब है कि केवल टेम्पलेट {{data.title}} अपडेट हो जाता है। फिर, अन्य 3 बाइंडिंग क्यों नहीं?

मुझे उम्मीद है कि चेहरे में मुझे कुछ स्पष्ट दिख रहा है और मुझे यह याद आ रही है। यदि आप मुझे यह प्राप्त करने के लिए प्राप्त करते हैं, तो मैं आपको एक बियर खरीदूंगा, या आपको कुछ अंक, या कुछ अन्य चीज़ दे दूंगा। बहुत धन्यवाद।




Links