AngularJS এ এনজি-রিপিট স্কোপ সহ দিকনির্দেশক বিচ্ছিন্ন সুযোগ

Question

আমার একটি বিচ্ছিন্ন সুযোগের সাথে একটি নির্দেশিকা রয়েছে (যাতে আমি নির্দেশটি অন্য জায়গায় পুনরায় ব্যবহার করতে পারি), এবং যখন আমি এই নির্দেশটি একটি দিয়ে ব্যবহার করি ng-repeat, এটি কাজ করতে ব্যর্থ হয়।

আমি এই বিষয়ে সমস্ত ডকুমেন্টেশন এবং স্ট্যাক ওভারফ্লো উত্তরগুলি পড়েছি এবং বিষয়গুলি বুঝতে পারি। আমি বিশ্বাস করি যে আমি সমস্ত স্বাভাবিক গ্যাচচাকে এড়িয়ে চলেছি।

সুতরাং আমি বুঝতে পারি যে ng-repeatনির্দেশটি দ্বারা তৈরি স্কোপটির কারণে আমার কোডটি ব্যর্থ । আমার নিজস্ব নির্দেশিকা একটি বিচ্ছিন্ন সুযোগ তৈরি করে এবং প্যারেন্ট স্কোপের কোনও বস্তুর সাথে দ্বিমুখী ডেটা বন্ডিং করে। আমার নির্দেশিকা এই সীমাবদ্ধ ভেরিয়েবলের জন্য একটি নতুন অবজেক্ট-মান নির্ধারণ করবে এবং আমার নির্দেশিকাটি ব্যবহার না করা হলে এটি পুরোপুরি কার্যকর হয় ng-repeat(প্যারেন্ট ভেরিয়েবলটি সঠিকভাবে আপডেট হয়)। তবে, এর সাথে ng-repeat, অ্যাসাইনমেন্টটি স্কোপটিতে একটি নতুন ভেরিয়েবল তৈরি করে ng-repeatএবং প্যারেন্ট ভেরিয়েবল পরিবর্তনটি দেখতে পায় না। আমি যা পড়েছি তার ভিত্তিতে এই সমস্ত প্রত্যাশিত।

আমি আরও পড়েছি যে যখন কোনও নির্দিষ্ট উপাদানটিতে একাধিক নির্দেশনা থাকে তখন কেবল একটি সুযোগ তৈরি হয়। এবং যে priorityনির্দেশাবলী প্রয়োগ করা হয় তা নির্ধারণ করার জন্য প্রতিটি নির্দেশিকায় একটি সেট করা যেতে পারে; নির্দেশগুলি অগ্রাধিকার অনুসারে বাছাই করা হয় এবং তারপরে তাদের সংকলন ফাংশনগুলি বলা হয় ( http://docs.angularjs.org/guide/directive এ শব্দ অগ্রাধিকারের সন্ধান করুন )।

সুতরাং আমি আশা করছিলাম যে আমার নির্দেশটি প্রথমে চলে এবং একটি বিচ্ছিন্ন সুযোগ তৈরি করে শেষ করে তা নিশ্চিত করার জন্য আমি অগ্রাধিকারটি ব্যবহার করতে পারি, এবং যখন ng-repeatরান হয় তখন এটি প্যারেন্ট স্কোপ থেকে প্রোটোটাইপিকভাবে উত্তরাধিকার সূত্রে একটি সুযোগ তৈরি করার পরিবর্তে আইসোলেট-স্কোপটিকে পুনরায় ব্যবহার করে। ng-repeatডকুমেন্টেশন বলে যে অগ্রাধিকার পর্যায়ে যে নির্দেশ রান 1000। এটি 1একটি উচ্চ অগ্রাধিকার স্তর বা নিম্ন অগ্রাধিকার স্তর কিনা তা পরিষ্কার নয় । আমি যখন 1আমার নির্দেশনায় অগ্রাধিকার স্তরটি ব্যবহার করি তখন এটি কোনও পার্থক্য করে না, তাই আমি চেষ্টা করেছিলাম 2000। তবে এটি বিষয়টিকে আরও খারাপ করে তোলে: আমার দ্বিমুখী বাইন্ডিংগুলি হয়ে যায় undefinedএবং আমার নির্দেশিকা কোনও কিছুই প্রদর্শন করে না।

আমি আমার সমস্যাটি দেখানোর জন্য একটি বেহালতা তৈরি করেছি । আমি priorityআমার নির্দেশে সেটিং সম্পর্কে মন্তব্য করেছি। আমার কাছে নাম অবজেক্টের একটি তালিকা এবং একটি নির্দেশিকা বলা হয়েছে name-rowযা নাম অবজেক্টের প্রথম এবং শেষ নাম ক্ষেত্রগুলি দেখায়। যখন প্রদর্শিত নামটি ক্লিক করা হয়, আমি চাই এটি selectedপ্রধান স্কোপের মধ্যে একটি ভেরিয়েবল সেট করে । নামের অ্যারে, selectedভেরিয়েবলটি name-rowদ্বি-মুখী ডেটা-বাইন্ডিং ব্যবহার করে নির্দেশকে প্রেরণ করা হয় ।

আমি জানি যে কীভাবে এটি মূল স্কোপগুলিতে কল করে কাজ করতে পারে। আমি আরও জানি যে যদি selectedঅন্য কোনও বস্তুর ভিতরে থাকে এবং আমি বাইরের বস্তুর সাথে আবদ্ধ থাকি তবে জিনিসগুলি কাজ করবে। তবে আমি এই মুহুর্তগুলিতে এই সমাধানগুলিতে আগ্রহী নই।

পরিবর্তে, আমার কাছে থাকা প্রশ্নগুলি হ'ল:

• ng-repeatপ্রোটোটাইপিকভাবে প্যারেন্ট স্কোপ থেকে উত্তরাধিকার সূত্রে এমন সুযোগ তৈরি করা থেকে আমি কীভাবে বাধা দেব এবং এর পরিবর্তে এটি আমার নির্দেশকের বিচ্ছিন্নতা-সুযোগ ব্যবহার করবে?
• 2000আমার নির্দেশনায় অগ্রাধিকার স্তর কেন কাজ করছে না?
• বাটারং ব্যবহার করে কী ধরণের সুযোগ ব্যবহার হচ্ছে তা জানা সম্ভব?

Comments

সাধারণত, যদি আপনার নির্দেশকে একই নির্দেশে অন্য নির্দেশাবলীর সাথে একই উপাদান ব্যবহার করা হয় তবে আপনি কোনও বিচ্ছিন্ন সুযোগ ব্যবহার করতে চান না। যেহেতু আপনি আপনার নিজস্ব স্কোপ বৈশিষ্ট্য তৈরি করছেন এবং আপনার এনজি-রিপিট নিয়ে কাজ করা দরকার, তাই আমি scope: trueআপনার নির্দেশের জন্য ব্যবহার করার পরামর্শ দিই । এছাড়াও দেখুন (যদি আপনি ইতিমধ্যে না থাকেন) স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 14914213/… এছাড়াও, কেবলমাত্র নির্দেশিকা একাধিক স্থানে ব্যবহৃত হবে তার অর্থ এই নয় যে আমাদের স্বয়ংক্রিয়ভাবে একটি বিচ্ছিন্ন সুযোগ ব্যবহার করা উচিত।

— রাজকোক

আমি আপনার অনেক উত্তর পড়েছি (এগুলি লেখার জন্য ধন্যবাদ তারা দুর্দান্ত beyond) তবে আপনার প্রশ্নগুলি পড়ার জন্য আমার কাছে কখনও তা ঘটেনি :-)। আপনি যা লিঙ্ক করেছেন তা আমি পড়েছি। আমার কাছে এটি উপস্থিত হয় যে বিচ্ছিন্নভাবে স্কোপ নির্দেশিকাটি অন্য নির্দেশের সাথে মিশ্রিত করা যায় না। আমি এই অনুভূতির সাথে একমত যে এই জাতীয় নির্দেশাবলী উপাদানগুলি এবং তাই তাদের অন্যান্য নির্দেশের সাথে মিশ্রিত করার প্রয়োজন নেই। আমার জন্য এক ব্যতিক্রম (এখনও অবধি) হবে ng-repeat। আমি মনে করি এটি স্বতন্ত্র নির্দেশের সাথে মেশাতে সক্ষম হওয়া মূল্যবান ng-repeat। চালিয়ে যেতে ...

— দীপক নুলু

উপরে থেকে অব্যাহত ... সুতরাং যদি কোনও উপাদানের সুযোগের সাথে যদি কেবল একটিই নির্দেশ থাকে তবে ng-repeatতার সুযোগ নেই। ng-repeatসাধারণ ব্যবহারের ক্ষেত্রে একটি সুযোগ থাকা অর্থপূর্ণ, সুতরাং আমি এটিকে পরিবর্তন করার পরামর্শ দিচ্ছি না। পরিবর্তে, যেমন আমি অ্যালেক্স ওসোবারের উত্তরে মন্তব্য করেছি, আমি মনে করি ng-repeatযে এটির নিজস্ব সুযোগ তৈরি করে না তার ভিত্তিতে আমি একটি পুনরাবৃত্তি নির্দেশিকা তৈরি করব । এরপরে এটি পুনরায় নির্দেশনাগুলির জন্য ব্যবহার করা যেতে পারে যার নিজস্ব বিচ্ছিন্ন স্কোপ রয়েছে। চালিয়ে যেতে ...

— দীপক নুলু

যে নির্দেশটি পুনরাবৃত্তি করে তার কোডটি এখন ব্যবহার করতে হবে ng-repeatবা কাস্টম স্কোপ-কম পুনরাবৃত্ত নির্দেশিকা তা জানতে হবে। আমি মনে করি "আহ্বানকারী" এটি জানার জন্য ঠিক আছে তবে "কলি" (নির্দেশটি পুনরাবৃত্তি করা হচ্ছে) এটি পুনরাবৃত্তি হচ্ছে কিনা তা জানা ঠিক হবে না। চালিয়ে যেতে ...

— দীপক নুলু

মন্তব্যগুলির সাথে এখানে কিছুটা ক্রেজিড হওয়া ... :-) এনজিপিপিটি অবশ্যই তার নিজস্ব সুযোগ তৈরি করবে। আপনি কেন এখানে একটি বিচ্ছিন্ন সুযোগ প্রয়োজন মনে করেন?

— জোশ ডেভিড মিলার

Answer 1

ঠিক আছে, উপরের অনেক মন্তব্যের মাধ্যমে আমি বিভ্রান্তি আবিষ্কার করেছি। প্রথমত, স্পষ্টকরণের কয়েক দফা:

• এনজিরিপিট আপনার নির্বাচিত বিচ্ছিন্ন সুযোগকে প্রভাবিত করে না
• আপনার নির্দেশাবলীর বৈশিষ্ট্যগুলিতে ব্যবহারের জন্য পরামিতিগুলি এনজিআরেপিতে প্রোটোটাইপিকভাবে-উত্তরাধিকারসূত্রে প্রাপ্ত সুযোগটি ব্যবহার করবেন না
• আপনার নির্দেশিকাটি কাজ না করার কারণে বিচ্ছিন্ন সুযোগের সাথে কোনও সম্পর্ক নেই

এখানে একই কোডের উদাহরণ রয়েছে তবে নির্দেশিকাটি সরানো সহ:

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

এখানে একটি জেএসফিডাল দেখানো হয়েছে যে এটি কাজ করবে না। আপনার নির্দেশ অনুসারে ঠিক একই ফলাফল পাবেন।

কেন এটি কাজ করে না? কারণ AngularJS এর ​​স্কোপগুলি প্রোটোটাইপিকাল উত্তরাধিকার ব্যবহার করে। মান selectedআপনার পিতা বা মাতা সুযোগ উপর একটি হল আদিম । জাভাস্ক্রিপ্টে এর অর্থ হ'ল কোনও শিশু যখন একই মান সেট করে তখন এটি ওভাররাইট করা হবে। অ্যাঙ্গুলারজেএস স্কোপগুলিতে একটি সুবর্ণ নিয়ম রয়েছে: মডেল মানগুলির মধ্যে সর্বদা একটি হওয়া উচিত .। অর্থাৎ এগুলি কখনই আদিম হওয়া উচিত নয়। দেখুন এই তাই উত্তর আরও তথ্যের জন্য।

---

স্কোপগুলি প্রাথমিকভাবে দেখতে কেমন তার একটি চিত্র এখানে।

প্রথম আইটেমটি ক্লিক করার পরে, স্কোপগুলি এখন এর মতো দেখায়:

লক্ষ্য করুন যে selectedএনজিপিপি স্কোপতে একটি নতুন সম্পত্তি তৈরি করা হয়েছিল। কন্ট্রোলার স্কোপ 003 পরিবর্তন করা হয়নি।

আপনি সম্ভবত অনুমান করতে পারেন যে আমরা যখন দ্বিতীয় আইটেমটিতে ক্লিক করি তখন কী হয়:

---

সুতরাং আপনার সমস্যাটি আসলে কোনওভাবেই এনজিপিপিটের কারণে হয় না - এটি অ্যাঙ্গুলারজেএস-এ স্বর্ণের নিয়ম ভঙ্গ করে। এটির সমাধানের উপায়টি কেবল কোনও বস্তুর সম্পত্তি ব্যবহার করা:

$scope.state = { selected: undefined };

<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

এখানে দ্বিতীয় জেএসফিডেল এটিও দেখায়।

স্কোপগুলি প্রাথমিকভাবে দেখতে দেখতে এখানে রয়েছে:

প্রথম আইটেমটি ক্লিক করার পরে:

এখানে, নিয়ন্ত্রক সুযোগটি পছন্দসইভাবে প্রভাবিত হচ্ছে।

এছাড়াও, এটি প্রমাণ করতে যে এটি এখনও আপনার নির্দেশের সাথে একটি বিচ্ছিন্ন সুযোগের সাথে কাজ করবে (কারণ, আবার এটির সাথে আপনার সমস্যার কোনও যোগসূত্র নেই), এখানেও তার জন্য জেএসফিডেল রয়েছে , ভিউটি অবশ্যই অবজেক্টটিকে প্রতিবিম্বিত করবে। আপনি নোট পাবেন যে শুধুমাত্র প্রয়োজনীয় পরিবর্তন যা ব্যবহার করার ছিল বস্তুর একটি পরিবর্তে আদিম ।

স্কোপগুলি প্রাথমিকভাবে:

প্রথম আইটেমটিতে ক্লিক করার পরে স্কোপগুলি:

উপসংহারে: আবারও, আপনার সমস্যাটি বিচ্ছিন্ন সুযোগের সাথে নয় এবং এনজিরিপিট কীভাবে কাজ করে তা নিয়ে নয়। আপনার সমস্যাটি হ'ল আপনি এমন একটি নিয়ম ভঙ্গ করছেন যা এই সমস্যাটির দিকে পরিচালিত করে। AngularJS এর ​​মডেলগুলির সর্বদা একটি হওয়া উচিত .।

Comments

আইসোলেট-স্কোপস এবং 2-ওয়ে ডেটা বাইন্ডিংয়ের সাথে নির্দেশাবলী নিয়ে আমার পরীক্ষাগুলি আমাকে বিশ্বাস করতে পরিচালিত করে যে .স্বর্ণের নিয়ম কেবলমাত্র স্কোপের জন্য প্রয়োজন যা প্রোটোটাইপিকাল উত্তরাধিকারসূত্রে থাকে। বিচ্ছিন্ন-স্কোপগুলির সাহায্যে আপনার যে আগ্রহের পরিবর্তনগুলি আগ্রহী scope: {}সেগুলি নির্দেশের সংজ্ঞাতে সংজ্ঞায়িত করা হয় এবং সুতরাং সেই পরিবর্তনগুলি প্রথম থেকেই বিচ্ছিন্ন-স্কোপে উপস্থিত থাকবে। এছাড়াও, তারা প্যারেন্ট ভেরিয়েবলগুলিকে মুখোশ দেয় না কারণ বিচ্ছিন্নতা-স্কোপ মূলত অভিভাবকের সুযোগ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয় না। অর্থাত্ মাস্ক করার কোনও "পিতামাতার" সুযোগ নেই।

— দীপক নুলু

এও বলা উচিত ছিল: আপনার নির্দেশটি কোনও শিশু সুযোগ তৈরি করছে না, তবে এটি সহজেই এমন একটি প্রসঙ্গে ব্যবহার করা যেতে পারে যার জন্য সন্তানের সুযোগ প্রয়োজন। এনজিপিপিট হ'ল একটি কেস। প্রতিলিপি হয়। আমাকে বিশ্বাস করুন - ব্যবহার করুন .।

— জোশ ডেভিড মিলার

অ্যাঙ্গুলারজেএস গুগল গ্রুপে আলোচনা যেখানে @ জোশডাভিডমিলার অবশেষে আমার বিভ্রান্তি পরিষ্কার করতে পেরেছিলেন!

— দীপক নুলু

আপনি ছেলেরা কোথা থেকে এই শীতল চিত্রটি পাবেন? আমি অন্য একজন ব্যবহারকারীও এগুলি পোস্ট করতে দেখেছি।

— আসাদ সাইদুদ্দীন 21

@ আসাদ, আমি সম্প্রতি সরঞ্জামটি গিটহাবের উপরে রেখেছি, এটি পেরি স্কোপ বলে ।

— রাজকক

Answer 2

আপনার প্রশ্নের উত্তর এড়াতে সরাসরি চেষ্টা না করে পরিবর্তে নীচের ফিডলটি দেখুন:

http://jsfiddle.net/dVPLM/

মূল বিষয়টি হ'ল অ্যাংুলারের প্রচলিত আচরণের বিরুদ্ধে লড়াই করার এবং পরিবর্তনের পরিবর্তে আপনি আপনার নির্দেশকে ng-repeatএটিকে ওভাররাইড করার চেষ্টা করার বিরোধিতা করে কাজ করতে পারেন।

আপনার টেমপ্লেটে:

    <name-row 
        in-names-list="names"
        io-selected="selected">
    </name-row>

আপনার নির্দেশে:

    template:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'

আপনার প্রশ্নের জবাবে:

• ng-repeat একটি সুযোগ তৈরি করবে, আপনার সত্যিই এটি পরিবর্তন করার চেষ্টা করা উচিত নয়।
• নির্দেশিকাগুলিতে অগ্রাধিকার কেবল মৃত্যুদণ্ডের আদেশ নয় - দেখুন: কৌণিক জেএস: এইচটিএমএল সংকলক কীভাবে সংকলনের জন্য আদেশটি সাজায়?
• বাটারং-এ, আপনি যদি পারফরম্যান্স ট্যাবটি পরীক্ষা করেন, আপনি প্রতিটি সুযোগের জন্য প্রকাশিত বাক্যগুলি দেখতে পাবেন এবং এটি আপনার প্রত্যাশার সাথে মেলে কিনা তা পরীক্ষা করতে পারেন।

Comments

এত তাড়াতাড়ি সাড়া দেওয়ার জন্য আপনাকে ধন্যবাদ। আমি যা চেষ্টা করছি তা শস্যের বিপরীতে চলে গেলে আমি কিছুটা দুঃখ পেয়েছি (অ্যাঙ্গুলারজেএস তবে এক দুর্দান্ত কাঠামো)। একটি নির্দেশকে বোঝানো হয় পুনরায় ব্যবহারযোগ্য উপাদান। যখন এটি লেখা হয়, লেখক এটি নিয়ে কোনটি ব্যবহার করবেন কিনা তা নিয়ে চিন্তিত হওয়া উচিত ng-repeatনয়। এটি যখন প্রথম লেখা হয় তখন এটি কখনই ব্যবহার হয় না ng-repeat। এবং ভবিষ্যতে কিছু সময় এটির সাথে ব্যবহার হতে পারে ng-repeatএবং সেই সময়ে এটি পুনর্লিখন ছাড়া কেবল কাজ করা উচিত। আশা করি অ্যাঙ্গুলারজেএস এর ভবিষ্যতে মুক্তি এটি সম্ভব করে দেবে।

— দীপক নুলু

আমি উপরে আমার মন্তব্য স্পষ্ট করতে চাই। আমি মনে করি যে এটি এমন কোনও নির্দেশিকা লেখা সম্ভব যা এটি ব্যবহার করা হচ্ছে কিনা তা নিয়ে চিন্তিত ng-repeatনয়। তবে এটি প্রদর্শিত হয় যে আমাকে কোনও ফাংশনে নির্দেশের দিকে যেতে হবে যাতে এটি প্যারেন্ট স্কোপের মধ্যে পরিবর্তনগুলি পরিবর্তন করতে পারে, পরিবর্তে নির্দেশকের নিজস্ব স্কোপটিতে দ্বি-দ্বি বাইন্ডিংকে রূপান্তর করতে সক্ষম হয়। দ্বিমুখী বাইন্ডিং এবং পুনঃব্যবহারযোগ্য নির্দেশাবলী অ্যাংুলারজেএস সম্পর্কে আমার শীর্ষ দুটি প্রিয় জিনিস এবং ng-repeatএটি মলমে মাছি হিসাবে প্রমাণিত হচ্ছে। হয়তো আমি এমন একটি ng-repeatসমতুল্য লিখতে পারি যা তার নিজস্ব সুযোগ তৈরি করে না।

— দীপক নুলু