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

কাজের ক্ষেত্রে আপনি এনজি-শোয়ের পরিবর্তে এনজি-শো = "শর্ত" ব্যবহার করতে পারেন। এটি কাজ করা উচিত.

— হরি দাস

আমি ধারণা করি এটি এখন কোনও সমস্যা নয় যে কোনওটি ব্যবহার করতে পারেন 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বাচ্চার সুযোগের ভিতরে পরিবর্তন করে তবে বাইরের পিতামাতার সুযোগটি নয়।

দ্রষ্টব্য, আপনি যদি প্যারেন্ট স্কোপে ডেটাটি সংশোধন করতে চান তবে আপনাকে যুক্ত করা শেষ ডিভের মতো কোনও অবজেক্টের অভ্যন্তরীণ বৈশিষ্ট্যগুলি পরিবর্তন করতে হবে।

Comments

আমি কীভাবে প্রধান নিয়ন্ত্রকদের ফাংশন থেকে এনজি-ইফ এর স্কোপটি অ্যাক্সেস করব? কিছুটা হতাশার। এর কারণ কী?

— জাস্টিন কার্লসন

কিছু নয়, @ স্যাজা ঠিক এই প্রশ্নের উত্তর দিয়েছেন। আমি যদিও এই উত্তরটি সঠিক হিসাবে চিহ্নিত করব, যেহেতু এটি আমার সমস্যাগুলির সঠিক কারণটি ব্যাখ্যা করে।

— জাস্টিন কার্লসন

এটির একটি কারণ যা উদাহরণে উল্লিখিত হিসাবে স্কোপ বৈশিষ্ট্যগুলিকে সরাসরি পরিবর্তিত করার পরিবর্তে আপনার সুযোগে একটি ধারণকৃত বস্তু ব্যবহার করা মোটামুটি সাধারণ: $scope.obj = {...}এবং ng-model="obj.someProperty"এই সীমাবদ্ধতাটি অতিক্রম করে।

— ওয়ালফটোন

Answer 2

আপনি এর $parentমতো পিতামাতার স্কোপে সংজ্ঞায়িত মডেলটি উল্লেখ করতে ব্যবহার করতে পারেন

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

Comments

তবে আমার কাছে ng-model="$parent.$parent.fooকারণ আমি ইতিমধ্যে একটি সাথে একটি ক্ষেত্রের মধ্যে আছি ng-repeat- এটি কি সর্বোত্তম উপায়?

— chovy

এটা সত্যিই বিভ্রান্তিকর। এটা কেন? এবং কেন এনজি-হাইডের নিজস্ব সুযোগ নেই?

— ডোমিনিক গলটারম্যান

পুনঃগৌল: সম্ভবতঃ এনজি-হাইড / এনজি-শো বর্তমান ডিওএম-এ কাজ করে এবং কেবল একটি সিএসএস ক্লাস যুক্ত / সরিয়ে ফেলবে, যখন এনজি-ইফ / এনজি-সুইচ / এনজি-পুনরাবৃত্তি ডম-এর সাথে সমস্ত ম্যাক করে এবং অতিরিক্ত অবস্থার উপর নজর রাখে । বোধশক্তি মনে হয়।

— ত্রিশাব্যব

বোধগম্য শব্দটি আমি ব্যবহার করি না ।

— জোনাথন ডুমাইন 21

আসল সুযোগে কোনও বস্তু যুক্ত করুন এবং সেই বস্তুর বৈশিষ্ট্য পরিবর্তন করুন। যেমন এনজি-মডেল = "মাইঅবজেক্ট.প্রোপার্টি"। এটি সমস্ত সুযোগ / $ পিতামাতার অন্তর্নিহিততার দিকটি ছড়িয়ে দেবে। আরও তথ্যের জন্য গুগল "কৌণিক ডট বিধি"।

— আসমর

Answer 3

আপনি এনজিহাইড (বা এনজি শো) নির্দেশিকা ব্যবহার করতে পারেন । এটি এনজিআইএফের মতো বাচ্চার সুযোগ তৈরি করে না।

<div ng-hide="testa">

Comments

ngIfতাহলে কেন বাচ্চার সুযোগ তৈরি হয়? আমার কাছে খুব অদ্ভুত লাগছে।

— ফ্রিল করুন

Zsong উত্তরের মন্তব্যগুলিতে মনোযোগ দিন। ng-hideএইচটিএমএল কাঠামো পরিবর্তন করে না। এটি কেবল CSS শৈলীর পরিবর্তন করে। ng-ifআরও জটিল: এটি শর্তের উপর নির্ভর করে এইচটিএমএল অংশগুলি সরিয়ে দেয় এবং সন্নিবেশ করায়। এটি স্টেট স্টোর করার জন্য শিশুদের সুযোগ তৈরি করে (কমপক্ষে এটি লুকানো এইচটিএমএল অংশটি সঞ্চয় করা উচিত)।

— ভাসিলি কেভ্রোলেটিন

হ্যাঁ, আমার পক্ষে কাজ করুন

— বাসিত

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>

আশা এই সাহায্য করে, Yishy

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>