Angularjs एनजी-मॉडल एनजी-अगर के अंदर काम नहीं करता है

Question

यहाँ समस्या को दिखाते हुए फिडल है। http://jsfiddle.net/Erk4V/1/

ऐसा प्रतीत होता है कि यदि मेरे पास एनजी-मॉडल है एनजी-अगर, मॉडल अपेक्षा के अनुरूप काम नहीं करता है।

मैं सोच रहा हूं कि क्या यह बग है या अगर मैं उचित उपयोग को गलत समझ रहा हूं।

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="testb" />
        </div>
        <div ng-if="!someothervar">
            testc (with ng-if): <input type="checkbox" ng-model="testc" />
        </div>

    </div>
</div>

Comments

वर्कअराउंड के लिए आप ng-if के बजाय ng-show = "CONDITION" का उपयोग कर सकते हैं। यह काम करना चाहिए।

— हरि दास

मुझे लगता है कि यह अब एक मुद्दा नहीं है जिसका कोई उपयोग कर सकता है controllerAs?

— जेमीबारो

अंतर्निहित के साथ एक निर्देश का उपयोग करते समय मुझे एक ही समस्या थी scope:falseऔर मैंने ng-ifनिर्देश के चारों ओर तत्व जोड़ दिया - शुरू में

— स्कोप्स

Answer 1

ng-ifनिर्देश, अन्य निर्देशों की तरह एक बच्चे गुंजाइश पैदा करता है। नीचे दी गई स्क्रिप्ट देखें (या यह jsfiddle )

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>

<script>
    function main($scope) {
        $scope.testa = false;
        $scope.testb = false;
        $scope.testc = false;
        $scope.obj = {test: false};
    }
</script>

<div ng-app >
    <div ng-controller="main">
        
        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />
        {{obj.test}}
        
        <div>
            testa (without ng-if): <input type="checkbox" ng-model="testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="testb" /> {{testb}}
        </div>
        <div ng-if="!someothervar">
            testc (with ng-if): <input type="checkbox" ng-model="testc" />
        </div>
        <div ng-if="!someothervar">
            object (with ng-if): <input type="checkbox" ng-model="obj.test" />
        </div>
        
    </div>
</div>

तो, आपका चेकबॉक्स testbचाइल्ड स्कोप के अंदर नहीं, बल्कि बाहरी पेरेंट स्कोप को बदलता है ।

ध्यान दें, यदि आप डेटा को मूल दायरे में संशोधित करना चाहते हैं, तो आपको किसी ऑब्जेक्ट के आंतरिक गुणों को संशोधित करने की आवश्यकता होगी जैसे मैंने पिछले div में जोड़ा था।

Comments

मैं मुख्य नियंत्रकों के कार्यक्षेत्र से एनजी-इफ-स्कोप का उपयोग कैसे करूंगा? थोड़ी निराशा हुई। इसका क्या कारण है?

— जस्टिन कार्लसन

कोई बात नहीं, @sza ने सिर्फ यही जवाब दिया कि ^ सवाल। मैं इस जवाब को सही के रूप में चिह्नित करने जा रहा हूं, क्योंकि यह सटीक कारण बताता है कि मेरे पास समस्या थी।

— जस्टिन कार्लसन

इसका एक कारण यह है कि गुंजाइश पर गुण को सीधे संशोधित करने के बजाय, अपने दायरे में किसी ऑब्जेक्ट का उपयोग करना काफी आम है, जैसा कि उदाहरण में बताया गया है: $scope.obj = {...}और ng-model="obj.someProperty"इस सीमा को पार कर जाता है।

— wulftone

Answer 2

आप $parentइस तरह से मूल क्षेत्र में परिभाषित मॉडल को संदर्भित करने के लिए उपयोग कर सकते हैं

<input type="checkbox" ng-model="$parent.testb" />

Comments

तो मेरे पास है ng-model="$parent.$parent.fooक्योंकि मैं पहले से ही एक गुंजाइश के अंदर हूँ ng-repeat- क्या यह वास्तव में सबसे अच्छा तरीका है?

— 3

यह वास्तव में भ्रामक है। ऐसा क्यों है? और एनजी-छिपाने का अपना दायरा क्यों नहीं है?

— डोमिनिक गोल्टरमैन

Re @Gaul: संभवत: क्योंकि एनजी-छिपाने / एनजी-शो वर्तमान डोम पर संचालित होता है और बस सीएसएस क्लास को जोड़ / हटा देता है, जबकि एनजी-अगर / एनजी-स्विच / एनजी-दोहराता है सभी डोम के साथ टकराते हैं और अतिरिक्त स्थिति का ट्रैक रखते हैं । समझदार लगता है।

— trisweb

समझदार मेरे द्वारा उपयोग किए जाने वाला शब्द नहीं है।

— जोनाथन ड्यूमाइन

किसी ऑब्जेक्ट को मूल दायरे में जोड़ें, और उस ऑब्जेक्ट के गुणों को बदलें। जैसे एनजी-मॉडल = "myObject.property"। यह सभी दायरे / $ पैरेंट इनानिटी को दरकिनार कर देगा। अधिक जानकारी के लिए Google "कोणीय डॉट नियम"।

— अस्मोर

Answer 3

आप ngHide (या ngShow) निर्देश का उपयोग कर सकते हैं । यह चाइल्ड स्कोप नहीं बनाता है क्योंकि ngIf करता है।

<div ng-hide="testa">

Comments

ngIfफिर बच्चा गुंजाइश क्यों बनाता है? मुझे बहुत अजीब लगता है।

— 9

Zsong उत्तर की टिप्पणियों पर ध्यान दें। ng-hideHTML संरचना को परिवर्तित नहीं करता है। यह बस सीएसएस शैलियों को बदलता है। ng-ifअधिक जटिल है: यह HTML भागों को हटाता है और स्थिति के आधार पर सम्मिलित करता है। यह राज्य को स्टोर करने के लिए चाइल्ड स्कोप बनाता है (कम से कम इसे छिपे हुए html भाग को स्टोर करना चाहिए)।

— वासिली केवरोलेटिन

हाँ, मेरे लिए काम

— बासित

Answer 4

हमारे पास कई अन्य मामलों में ऐसा था, जो हमने आंतरिक रूप से तय किया है कि हमेशा नियंत्रक / निर्देश के लिए एक आवरण है ताकि हमें इसके बारे में सोचने की आवश्यकता न हो। यहाँ आप हमारे आवरण के साथ उदाहरण हैं।

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>

<script>
    function main($scope) {
        $scope.thisScope = $scope;
        $scope.testa = false;
        $scope.testb = false;
        $scope.testc = false;
        $scope.testd = false;
    }
</script>

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />
        Test D: {{testd}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="thisScope.testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="thisScope.testb" />
        </div>
        <div ng-show="!testa">
            testc (with ng-show): <input type="checkbox" ng-model="thisScope.testc" />
        </div>
        <div ng-hide="testa">
            testd (with ng-hide): <input type="checkbox" ng-model="thisScope.testd" />
        </div>

    </div>
</div>

आशा है कि यह मदद करता है, Yishay

Answer 5

हां, एनजी-छिपाना (या एनजी-शो) निर्देश बाल गुंजाइश पैदा नहीं करेगा।

यहाँ मेरा अभ्यास है:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>

<script>
    function main($scope) {
        $scope.testa = false;
        $scope.testb = false;
        $scope.testc = false;
        $scope.testd = false;
    }
</script>

<div ng-app >
    <div ng-controller="main">

        Test A: {{testa}}<br />
        Test B: {{testb}}<br />
        Test C: {{testc}}<br />
        Test D: {{testd}}<br />

        <div>
            testa (without ng-if): <input type="checkbox" ng-model="testa" />
        </div>
        <div ng-if="!testa">
            testb (with ng-if): <input type="checkbox" ng-model="$parent.testb" />
        </div>
        <div ng-show="!testa">
            testc (with ng-show): <input type="checkbox" ng-model="testc" />
        </div>
        <div ng-hide="testa">
            testd (with ng-hide): <input type="checkbox" ng-model="testd" />
        </div>

    </div>
</div>

http://jsfiddle.net/bn64Lrzu/

Answer 6

आप इसे इस तरह से कर सकते हैं और यदि आप एक कोड पेन चाहते हैं, तो आप सही तरीके से काम करेंगे

  <div ng-repeat="icon in icons">                   
                <div class="row" ng-if="$index % 3 == 0 ">
                    <i class="col col-33 {{icons[$index + n].icon}} custom-icon"></i>
                    <i class="col col-33 {{icons[$index + n + 1].icon}} custom-icon"></i>
                    <i class="col col-33 {{icons[$index + n + 2].icon}} custom-icon"></i>
                </div>
         </div>