2012-12-12 16 views
16

मुझे लगता है कि मुझे यहां कुछ सरल (और महत्वपूर्ण) याद आ रहा है। हमेशा प्रारंभिक मूल्य, नहीं अद्यतन से पता चलताकोणीय: 2 तरीके बाध्यकारी टेम्पलेट शामिल नहीं है

function Ctrl($scope) {  
    $scope.testvalue= "initial value"; 
}​ 

$ scope.testvalue का मूल्य की सूचना देने वाले:

<div ng-controller="Ctrl"> 
    <div ng-include src="'template.html'"></div> 
</div> 

<!-- template --> 
<script type="text/ng-template" id="template.html"> 
    <input ng-model="testvalue" /> 
</script> 

नियंत्रक: मुझे लगता है कि एक इनपुट है कि कुछ मान पर मैप की जाती है एक शामिल टेम्पलेट का उपयोग कर रहा मान (जब आप इनपुट में टाइप करते हैं)। ओबी-वान मेरी मदद करो। आप हमारी एकमात्र आशा है।

फिडल: http://jsfiddle.net/h5aac/

उत्तर

31

यह सब भी एक वस्तु के बजाय एक आदिम के लिए बाध्य की आम है। स्ट्रिंग का मान किसी ऑब्जेक्ट के संदर्भ में पास नहीं होता है। यदि आप एक आदिम के बजाय किसी ऑब्जेक्ट का उपयोग करते हैं, तो यह ठीक काम करता है। आपके दायरे में ऐसा कुछ है।

$scope.foo = {testvalue: "initial value"}; 

http://jsfiddle.net/h5aac/2/

इसके अलावा

देखें:

Using `ng-model` within a transcluded directive in AngularJS

binding issue when a directive in a ngRepeat

AngularJS - updating scope value with asynchronous response

मुझे यकीन है कि कर रहा हूँ वहाँ अधिक हैं ...

+0

धन्यवाद, कि वास्तव में यह किया गया था। क्या यह कोणीय में "बग" है, या यह जानबूझकर/अपेक्षित है? – Caleb

+4

मैं इसे वास्तव में "बग" नहीं कहूंगा। यह सिर्फ एक बात है कि कैसे जावास्क्रिप्ट ऑब्जेक्ट्स और प्राइमेटिव काम करते हैं जब वे पास हो जाते हैं। यदि आप एक var है जो एक स्ट्रिंग पर सेट है और आप इसे किसी फ़ंक्शन में पास करते हैं, तो फ़ंक्शन इसे सभी बदल सकता है, और यह मूल var के मान को प्रभावित नहीं करेगा। यदि वह var किसी ऑब्जेक्ट पर सेट किया गया था, तो यह एक संदर्भ है जो पारित हो रहा है, और फ़ंक्शन में किए गए किसी भी बदलाव से उस वस्तु को प्रभावित किया जाएगा जो मूल var संदर्भित कर रहा था। उम्मीद है कि यह समझ में आता है। – dnc253

+0

हां, यह सही समझ में आता है। धन्यवाद! – Caleb

7

माता पिता दायरे में एक वस्तु संपत्ति को संदर्भित करने के लिए एक वैकल्पिक माता पिता दायरे में आदिम तक पहुँचने के लिए $ माता-पिता का उपयोग करना है:

<input ng-model="$parent.testvalue" /> 

एनजी-शामिल एक बच्चे गुंजाइश पैदा करता है। उस दायरे को प्रोटोटाइपिक रूप से Ctrl के मूल दायरे से प्राप्त होता है। यहाँ कैसे 3 विविधताओं काम करते हैं:

  • $ parent.testvalue
  • testvalue अपने आप में एक नया संपत्ति है कि बच्चे गुंजाइश पर बनाया जाएगा करने के लिए मॉडल बांध माता पिता दायरे में संपत्ति के लिए मॉडल बांध। यह संपत्ति एक ही नाम से मूल दायरे की संपत्ति "छाया/छुपाती है"।
  • foo.testvalue (उदा।, @ Dnc253 का उत्तर देखें) मॉडल को मूल संपत्ति के साथ भी जोड़ता है। यह इस तरह काम करता है: जावास्क्रिप्ट बच्चे के दायरे में 'foo' नहीं देखता/ढूंढता है, इसलिए यह इसे मूल दायरे में (प्रोटोटाइपिकल विरासत के कारण) देखता है और उसे वहां पाता है।

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

<a ng-click="showScope($event)">show scope</a> 

और अपने कंट्रोल में यह कोड शामिल:

$scope.showScope = function(e) { 
    console.log(angular.element(e.srcElement).scope()); 
} 

टेक्स्टबॉक्स में टाइप करने से पहले, "स्कोप दिखाएं" लिंक पर क्लिक करें। कंसोल में (मैं क्रोम का उपयोग कर रहा हूं), आप "चाइल्ड" स्कोप का विस्तार कर सकते हैं और देख सकते हैं कि इसमें अभी तक एक टेस्टव्यू प्रॉपर्टी नहीं है (जो मुझे आश्चर्यजनक लगता है, क्योंकि मुझे नहीं पता कि यह "प्रारंभिक मूल्य" कैसे प्रदर्शित कर रहा है टेक्स्टबॉक्स में)।आप $ पेरेंट का विस्तार कर सकते हैं और आपको वहां testvalue प्रॉपर्टी दिखाई देगी - इस नाम वाली एक संपत्ति केवल इस बिंदु पर मूल दायरे में दिखाई देती है।

अब, कंसोल साफ़ करें, टेक्स्टबॉक्स में टाइप करें और फिर "शो स्कोप" लिंक पर क्लिक करें। आप देखेंगे कि "चाइल्ड" स्कोप में अब एक नई testvalue संपत्ति है। यह मूल संपत्ति को छाया/छुपाता है। इसलिए, बच्चे के दायरे में चीजें बच्चे के दायरे के परीक्षण की संपत्ति को देखते हैं, और माता-पिता के दायरे में चीजें अभिभावक स्कोप testvalue संपत्ति को देखते हैं।

अद्यतन: FYI करें, मैं हाल ही में है कि बहुत सारे चित्र के साथ और अधिक विस्तार से ऊपर अवधारणाओं बताते हैं, गुंजाइश प्रोटोटाइप विरासत के बारे में एक व्यापक जवाब/लेख लिखा था: What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

+0

उस स्पष्टीकरण मार्क के लिए धन्यवाद। यह मेरे लिए कुछ चीजों को मंजूरी दे दी। – Caleb

संबंधित मुद्दे