मार्कअप में कोणीय स्कोप वैरिएबल सेट करें

Question

सरल प्रश्न: मैं अपने नियंत्रक द्वारा पढ़ने के लिए html में एक स्कोप मान कैसे सेट कर सकता हूं?

var app = angular.module('app', []);

app.controller('MyController', function($scope) {
  console.log($scope.myVar);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="MyController" app-myVar="test">
    {{myVar}}
  </div>
</div>

JSFiddle: http://jsfiddle.net/ncapito/YdQcX/

Comments

आप इसे संभालने के लिए एक निर्देश बनाने से बेहतर हो सकते हैं। एक निर्देश इनकैप्सुलेट करेगा: पैरामीटर, इस निर्देश के लिए विशिष्ट नियंत्रक, और 'myMap' मार्कअप के लिए एक टेम्प्लेट।

— इयान मर्सर

Thats वास्तव में मैंने क्या किया ... बस निर्देशांक नियंत्रक में $ गुंजाइश.myVar तक पहुंचने के साथ कुछ मुद्दे थे। मुझे गुंजाइश चर तक पहुंचने के लिए नियंत्रक में एक घड़ी का उपयोग क्यों करना है?

— निक्स

शायद आप अपना निर्देशन पोस्ट कर सकते हैं? पर एक नजर डालें "समझौता ट्रांसक्लुजन और scopes" यहाँ docs.angularjs.org/guide/directive {myVar: '='} आप शायद जरूरत गुंजाइश है और आप कह सकते हैं कि my-var="foo"जब आप इसे कहते हैं। हाइफ़न बनाम कैमलकेस के उपयोग पर ध्यान दें। नोट: fooयहां मूल्यांकन किया गया है , यदि आप नहीं चाहते कि विशेषता के मान तक पहुंचने के लिए गुंजाइश परिभाषा में '@' का उपयोग करें।

— इयान मर्सर

@ निक्स क्या आप समझा सकते हैं कि मूल्य को आपके नियंत्रक के बजाय दृश्य में आरंभीकृत करने की आवश्यकता क्यों है? मुझे लगता है कि आप पहले से ही जानते हैं कि मूल्यों को शुरू करने का पारंपरिक तरीका नहीं है (अन्यथा आप पूछ नहीं रहे होंगे), और अन्य आपको बेहतर जवाब दे पाएंगे यदि वे आपके उपयोग के मामले को बेहतर समझते हैं।

— बीन

@SeantheBean मैं युवा और मूर्ख था ...;) मुझे कोई सुराग नहीं है कि मुझे ऐसा करने की आवश्यकता क्यों है। मैं शायद किसी चीज़ को हैक करने की कोशिश कर रहा था।

— निक्स

Answer 1

ng-initजब आप लूप के अंदर वेरिएबल्स असाइन कर रहे हैं तो काम नहीं करता है। उपयोग {{myVariable=whatever;""}}

अनुगामी ""किसी भी पाठ का मूल्यांकन किया जा रहा कोणीय अभिव्यक्ति रोकता है।

तब आप बस {{myVariable}}अपने वैरिएबल वैल्यू को आउटपुट करने के लिए कॉल कर सकते हैं ।

मुझे यह बहुत उपयोगी लगा जब कई नेस्टेड सरणियों को पुनरावृत्त करना और मैं कई बार क्वेरी करने के बजाय अपनी वर्तमान पुनरावृत्ति जानकारी को एक चर में रखना चाहता था।

Comments

हालांकि यह काम करता है, यह हैकरी लगता है। यही है, यह आम तौर पर {{}}केवल एक चर का उत्पादन करने के लिए उपयोग करने के लिए अच्छा व्यवहार है , चर को निर्दिष्ट करने के लिए नहीं। मैं कहूंगा कि stackoverflow.com/a/16799763/814160 अधिक सही है (दृश्य में कम JS कोड)।

— बीन

@SeantheBean के लिए +1 - मैंने यह परीक्षण किया है। लगता है कि बाल नियंत्रकों के साथ समस्याएँ हैं और मार्कअप में चर असाइन करने की गुंजाइश है। निर्देश मेरे उद्देश्यों के लिए काम करता है और एक ठोस समाधान प्रतीत होता है।

— पॉल कार्लटन

यह कोणीय 2/4 में काम नहीं करता है - बाइंडिंग में असाइनमेंट नहीं हो सकते हैं

— Demodave

@Demodave आपको इसके बजाय टाइपस्क्रिप्ट कोड में अपने सभी नियंत्रक चर सेट करना चाहिए, और HTML के लिए टाइपस्क्रिप्ट को जोड़ने के लिए केवल टेम्पलेट का उपयोग करें। टेम्पलेट को वेरिएबल असाइन नहीं किया जाना चाहिए।

— बॉक्समेइन

Answer 2

ngInit चर को आरंभ करने में मदद कर सकता है।

<div ng-app='app'>
    <div ng-controller="MyController" ng-init="myVar='test'">
        {{myVar}}
    </div>
</div>

jsfiddle उदाहरण

Comments

यह ध्यान दिया जाना चाहिए कि वे वास्तविक एप्लिकेशन के लिए इस समाधान की अनुशंसा नहीं करते हैं (लेकिन वास्तव में कोई विकल्प नहीं सुझाते हैं): docs.angularjs.org/guide/dev_guide.mvc.understanding_model

— माइक रॉबिन्सन

यह मेरे लिए काम करता है, हालाँकि, पहले तो चर अभी भी नियंत्रक में अपरिभाषित था। मैंने थोड़ा अंतराल लूप बनाया: var अंतराल = setInterval (फ़ंक्शन () {if ($ गुंजाइश.whatever) {// dostuff clearInterval (अंतराल);}}}, 10);

— रोस्टर

Answer 3

के myVarसाथ एक निर्देश बनाएँ

scope : { myVar: '@' }

और इसे इस तरह से कॉल करें:

<div name="my_map" my-var="Richmond,VA">

विशेष रूप से ऊँट टैग नाम के निर्देश में ऊंट मामले का संदर्भ दें।

अधिक जानकारी के लिए "ट्रांसकॉन्सेक्शन एंड स्कोप्स को समझना" यहां देखें: - http://docs.angularjs.org/guide/directive

यहाँ एक फिडेल है जो दिखाता है कि आप एक निर्देश के भीतर विभिन्न भिन्न तरीकों से वैरिएबल को स्केप से मानों को कॉपी कैसे कर सकते हैं।

Comments

मैं कई लोगों को करने में सक्षम होना चाहता हूं var-nick='my' var-nick2='test'। जब तक आप इसे निर्देशों के साथ लागू करने का एक तरीका नहीं सोच सकते हैं, मैं सिर्फ उपयोग करने जा रहा हूंng-init

— निक्स

आप कई विशेषताओं को दायरे में शामिल कर सकते हैं, बस आपको उनमें से किसी एक निर्देश का नाम होना चाहिए जिसे आप निष्पादित करना चाहते हैं (या उस निर्देश का नाम भी HTML में शामिल करें)। scope: {varNick: '@', varNick2: '@'}

— इयान मर्सर

लेकिन इसकी मापनीय नहीं है? मुझे प्रति चर एक निर्देश को परिभाषित करना होगा?

— निक्स

नहीं, आपको चर प्रति निर्देश की आवश्यकता नहीं है। उत्तर के लिए मैंने जिस बेला को जोड़ा है, उस पर एक नज़र डालें।

— इयान मर्सर

क्षमा करें, मैं पढ़ा हुआ याद करता हूं, आपका उदाहरण एकदम सही है, मेरा एकमात्र बदलाव था स्कोप {'@': '@ "}।

— निक्स

Answer 4

आप इस तरह से html से मान सेट कर सकते हैं। मुझे नहीं लगता कि कोणीय से अभी तक कोई सीधा समाधान है।

 <div style="visibility: hidden;">{{activeTitle='home'}}</div>

Comments

अच्छा हैक ... <div style="display: none">हालांकि सिफारिश करेंगे ।

— रोजर

Answer 5

आप ng-initनीचे दिखाए अनुसार उपयोग कर सकते हैं

<div class="TotalForm">
  <label>B/W Print Total</label>
  <div ng-init="{{BWCount=(oMachineAccounts|sumByKey:'BWCOUNT')}}">{{BWCount}}</div>
</div>
<div class="TotalForm">
  <label>Color Print Total</label>
  <div ng-init="{{ColorCount=(oMachineAccounts|sumByKey:'COLORCOUNT')}}">{{ColorCount}}</div>
</div>

और फिर अन्य खंडों में स्थानीय गुंजाइश चर का उपयोग करें:

<div>Total: BW: {{BWCount}}</div>
<div>Total: COLOR: {{ColorCount}}</div>

Comments

मुझे यह दृष्टिकोण पसंद है; कम हैप्पी लगता है। एक स्पष्टीकरण हालांकि, एनजी-इनिट में घुंघराले ब्रेस की आवश्यकता नहीं है।

— मंकल्त्ज़

Answer 6

$scope.$watch('myVar', function (newValue, oldValue) {
        if (typeof (newValue) !== 'undefined') {
            $scope.someothervar= newValue;
//or get some data
            getData();
        }


    }, true);

वैरिएबल कंट्रोलर के बाद इनिशियलाइज़ हो जाता है, इसलिए आपको इसे देखने की जरूरत है और जब इसे इनिशियलाइज़ न किया जाए।

Answer 7

मुझे उत्तर पसंद है लेकिन मुझे लगता है कि यह बेहतर होगा कि आप एक वैश्विक स्कोप फ़ंक्शन बनाएँ जो आपको आवश्यक स्कोप वैरिएबल सेट करने की अनुमति देगा।

तो GlobalController में बनाएँ

$scope.setScopeVariable = function(variable, value){
    $scope[variable] = value;
}

और फिर अपनी html फ़ाइल में कॉल करें

{{setScopeVariable('myVar', 'whatever')}}

यह तब आपको अपने संबंधित नियंत्रक में $ गुंजाइश.myVar का उपयोग करने की अनुमति देगा

Answer 8

यदि आप एक लूप में नहीं हैं, तो आप एनजी-इनिट का उपयोग कर सकते हैं अन्यथा आप उपयोग कर सकते हैं

{{var=foo;""}}

"" बादाम आपके संस्करण को प्रदर्शित नहीं करता है