কখন এনজি-যদি বনাম এনজি-শো / এনজি-হিডের পক্ষে?

Question

আমি তা বুঝতে পেরেছি ng-showএবং ng-hideকোনও উপাদানের উপর সেট করা ক্লাসকে প্রভাবিত করেছি এবং এটি ng-ifডিওমের অংশ হিসাবে কোনও উপাদানকে রেন্ডার করা হয়েছে কিনা তা নিয়ন্ত্রণ করে।

নির্বাচন রয়েছে নির্দেশনামা ng-ifউপর ng-show/ ng-hideবা ভাইস বিপরীতভাবে?

Comments

এনজি-ইফ এবং এনজি-শো / এনজি-লুকানোর মধ্যে পার্থক্য কী তা

— গজুস

ডার্ট ভাষার সাথে সম্পর্কিত নয় ।

— naXa

Answer 1

আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে তবে পার্থক্যটির সংক্ষিপ্তসার জন্য:

1. ng-ifDOM থেকে উপাদানগুলি সরিয়ে ফেলবে। এর অর্থ হ'ল আপনার সমস্ত হ্যান্ডলার বা এই উপাদানগুলির সাথে সংযুক্ত অন্য যে কোনও কিছুই হারাবে। উদাহরণস্বরূপ, যদি আপনি কোনও শিশু উপাদানগুলির সাথে একটি ক্লিক হ্যান্ডলারকে বেঁধে রাখেন, যখন ng-ifএটি মিথ্যা হিসাবে মূল্যায়ন করা হয়, সেই উপাদানটি ডিওএম থেকে সরানো হবে এবং পরে ক্লিকের হ্যান্ডলারটি আর কাজ করবে না, ng-ifপরে সত্য হিসাবে মূল্যায়ন করেও উপাদানটি প্রদর্শন করে। আপনাকে হ্যান্ডলারটি পুনরায় সংযুক্ত করতে হবে।
2. ng-show/ng-hideDOM থেকে উপাদানগুলি সরিয়ে দেয় না। এটি উপাদানগুলি আড়াল / প্রদর্শন করতে সিএসএস শৈলী ব্যবহার করে (দ্রষ্টব্য: আপনার নিজের ক্লাস যুক্ত করার প্রয়োজন হতে পারে)। এইভাবে আপনার হ্যান্ডলারগুলি যা শিশুদের সাথে সংযুক্ত ছিল সেগুলি হারাবে না।
3. ng-ifনা করে একটি শিশু সুযোগ তৈরি ng-show/ng-hideকরে

ডিওমে নেই এমন উপাদানগুলির পারফরম্যান্সের প্রভাব কম এবং আপনার ওয়েব অ্যাপ্লিকেশনটি ng-ifতুলনামূলকভাবে ব্যবহার করার সময় আরও দ্রুত হতে পারে ng-show/ng-hide। আমার অভিজ্ঞতায় পার্থক্য নগণ্য। উভয় ng-show/ng-hideএবং ng-ifকৌনিক ডকুমেন্টেশনের ক্ষেত্রে উদাহরণ সহ দুটি ব্যবহার করার সময় অ্যানিমেশনগুলি সম্ভব ।

শেষ পর্যন্ত, আপনার যে প্রশ্নের উত্তর দিতে হবে তা হ'ল আপনি ডিওএম থেকে উপাদানটি সরাতে পারবেন কিনা?

Comments

আপনি এর সাথে CSS3 অ্যানিমেশন ব্যবহার করতে পারেন ng-if। অ্যানিমেশন অনুচ্ছেদ এবং ডক্সে উদাহরণ পরীক্ষা করুন । এছাড়াও সঙ্গে ng-hide/ng-showCSS সিলেক্টর পছন্দ :first-childবা :nth-childঠিকমত কাজ করবে না যেহেতু গোপন উপাদানগুলিকে গণনা করা হবে।

— asukasz Wojciechowski

কৌণিক.ডার্টে অ্যানিমেশন পরিষেবা তুলনামূলকভাবে নতুন। এটি লেখার সময় এটি উপলব্ধ ছিল না।

— মার্কভুকসানোভিচ

হ্যান্ডলারদের যেমন আপনার হওয়া উচিত, তেমন বাঁধার জন্য আপনি যদি নির্দেশনা (যেমন এনজি-ক্লিক) ব্যবহার করেন তবে আপনার প্রথম বিষয়টি একটি নন-ইস্যু।

— কেভিন সি

এছাড়াও, ng-ifএকটি নতুন সুযোগ তৈরি ng-showকরে যখন না করে।

— মার্টিন

এটি আরও উল্লেখ করা উচিত যে ডিওএম থেকে উপাদানগুলি যুক্ত করা এবং অপসারণ ঘন ঘন কাজ করা হলে একটি উচ্চ কার্যকারিতা ব্যয় করতে পারে।

— কেভিন সি

Answer 2

একটি কোডপেনের জন্য এখানে দেখুন যা এনজি-ইফ / এনজি-শো, ডিওএম-ভিত্তিক কীভাবে পার্থক্য দেখায়।

@markovuksanovic এই প্রশ্নের উত্তর ভালভাবে দিয়ে গেছে। তবে আমি এটি অন্য দৃষ্টিকোণ থেকে এসেছি: আমি সবসময় ব্যবহার করে ng-ifএই উপাদানগুলিকে ডোম থেকে বের করে আনতাম, যদি না:

1. কোনও কারণে $watchঅদৃশ্য থাকাকালীন আপনার উপাদানগুলির ডেটা-বাইন্ডিংগুলি এবং আপনার উপাদানগুলির সক্রিয় থাকতে হবে। পুরো ফর্মটি বৈধ কিনা তা নির্ধারণ করার জন্য আপনি যদি বর্তমানে ইনপুটগুলিতে বৈধতা যাচাইযোগ্য নয় যাচাই করতে সক্ষম হতে চান তবে এর জন্য ফর্মগুলি একটি ভাল ক্ষেত্রে হতে পারে।
2. আপনি উপরে বর্ণিত হিসাবে শর্তাধীন ইভেন্ট হ্যান্ডলারগুলির সাথে কিছু সত্যই বিস্তৃত রাষ্ট্রীয় যুক্তি ব্যবহার করছেন। এটি বলেছিল , যদি আপনি নিজেকে ম্যানুয়ালি সংযুক্তি এবং বিযুক্তকরণগুলি দেখতে পান, যেমন আপনি এনজি-ইফ ব্যবহার করার সময় আপনি গুরুত্বপূর্ণ রাষ্ট্রটি হারাচ্ছেন, নিজেকে জিজ্ঞাসা করুন যে কোনও রাজ্যটি কোনও ডেটা মডেলটিতে আরও ভালভাবে উপস্থাপিত হবে কিনা এবং হ্যান্ডলাররা যখনই নির্দেশের মাধ্যমে শর্তাধীনভাবে প্রয়োগ করেছেন উপাদানটি রেন্ডার করা হয়। অন্য একটি উপায় রাখুন, হ্যান্ডলারের উপস্থিতি / অনুপস্থিতি রাষ্ট্রীয় ডেটাগুলির একধরণের। সেই তথ্যটি ডিওএম থেকে বের করে একটি মডেল হিসাবে পান। হ্যান্ডলারের উপস্থিতি / অনুপস্থিতি ডেটা দ্বারা নির্ধারিত হওয়া উচিত, এবং পুনরায় তৈরি করা সহজ।

কৌণিক সত্যই ভাল লেখা হয়। এটি কী করে তা বিবেচনা করে দ্রুত। তবে এটি যা করে তা হ'ল পুরো ম্যাজিক যা শক্ত জিনিসকে (দ্বি-উপাত্তের ডেটা-বাইন্ডিংয়ের মতো) তুচ্ছ-সহজ দেখায়। এই সমস্ত জিনিসকে সহজ দেখায় কিছুটা ওভারহেডের কার্য সম্পাদন করতে হবে। আপনি হয়ত অবাক হয়েই বুঝতে পারেন যে ডিওএম-এর একটি কুঁচকিতে $digestচক্র চলাকালীন কোনও সেটার ক্রিয়াকলাপ কত শত বা কয়েক হাজার বার মূল্যায়ন হয় যা এমনকি কেউ দেখছে না। এবং তারপরে আপনি বুঝতে পেরেছেন যে কয়েকজন বা শত শত অদৃশ্য উপাদানগুলি একই কাজ করছে ...

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

Comments

উপরের উত্তরে খুব সুন্দর সংযোজন। কিছু ভাল প্রসঙ্গ দেওয়া হয়েছে, যা সিদ্ধান্ত গ্রহণে সহায়তা করে। ধন্যবাদ।

— শান

ng-showআপনার যখন দরকারী হতে পারে তখন অনেকগুলি সামগ্রী সহ প্রতিটি ট্যাব বলুন যা রেন্ডার করতে সময় নেয়। প্রথম রেন্ডারিংয়ের পরে, ট্যাবগুলির মধ্যে সরানো তাত্ক্ষণিকভাবে ng-ifপ্রয়োজন হবে , যেখানে পুনরায় রেন্ডারিং, বাঁধাই ইভেন্টগুলি ইত্যাদির প্রয়োজন পড়বে you কৌণিকের মারাত্মক প্রয়োজনng-ifshowwatch

— সর্বাধিক

Answer 3

আমার অভিজ্ঞতা থেকে:

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

2) এনজি-ইফ স্কুটি তৈরি / ধ্বংস করে দিবে যখন এটি সত্য / মিথ্যাতে মূল্যায়ন করে। আপনার যদি এনজি-ইফ-এর সাথে কোনও কন্ট্রোলার সংযুক্ত থাকে তবে সেই নিয়ামক কোডটি এনজি-ইফ যদি সত্যকে মূল্যায়ন করে তবে প্রতিবার কার্যকর করা হবে। আপনি যদি এনজি-শো ব্যবহার করে থাকেন তবে কন্ট্রোলার কোডটি একবারে কার্যকর করা হবে। সুতরাং আপনার যদি এমন একটি বোতাম থাকে যা একাধিক ভিউগুলির মধ্যে টগল করে, এনজি-ইফ এবং এনজি-শো ব্যবহার করে আপনি কীভাবে আপনার কন্ট্রোলার কোডটি লেখেন তাতে একটি বিশাল পার্থক্য।

Comments

এটি একটি বিশাল সত্য! এনজি-যদি অগত্যা আপনার সীমানা দ্রুত না করে। এটি আপনার প্রয়োজনের উপর নির্ভর করে। আপনি যদি ভুল পরিস্থিতিতে ব্যবহার করে থাকেন তবে এটি অন্যভাবে তৈরি করতে পারে।

— থিয়াগো সি এস ভেন্তুরা

তবে আমার মতে এনজি-ইফ যদি ডিওএম-এ রেন্ডার না করে তবে এনজি-শো / লুকানোর তুলনায় এটি দ্রুত। আমি কি ভুল করছি পিএলস আমাকে সেই সময়ে সংশোধন করতে দিন

— পরদীপ জৈন

এনজি-যদি এটি মিথ্যা হিসাবে মূল্যায়ন করে তবে এটি আরও দ্রুততর হবে, যেহেতু, আপনি যেমন বলেছেন, কোনওভাবেই ডিওমে প্রবেশ করার দরকার নেই। তবে, যদি এটি সত্য হয় তবে আপনার সম্ভবত - সম্ভবত বেশ জটিল - ডিওমে অন্তর্ভুক্ত করার একটি ওভারহেড রয়েছে।

— মাওগ বলছেন মনিকা

"2) ng-যদি যখন এটি সত্য / মিথ্যা মূল্যায়ণ তৈরি করবে / সুযোগ ধ্বংস আপনি একটি নিয়ামক সংযুক্ত থাকে তাহলে NG-যদি, যে নিয়ামক কোড প্রত্যেক সময় মৃত্যুদন্ড কার্যকর করা হবে।"

— দ্য রেড মটর

Answer 4

উত্তরটি সহজ নয়:

এটি টার্গেট মেশিনগুলির উপর নির্ভর করে (মোবাইল বনাম ডেস্কটপ), এটি আপনার ডেটা, ব্রাউজার, ওএস, যে হার্ডওয়্যারটিতে চালিত হয় তার উপর নির্ভর করে ... আপনি যদি সত্যিই জানতে চান তবে আপনাকে মানদণ্ডের প্রয়োজন mark

এটি বেশিরভাগই মেমরি বনাম গণনা সমস্যা ... বেশিরভাগ কার্য সম্পাদনের সমস্যাগুলির সাথে তালিকাগুলির মতো পুনরাবৃত্ত উপাদানগুলির সাথে পার্থক্যটি উল্লেখযোগ্য হয়ে উঠতে পারে , বিশেষত যখন নেস্টেড (এনএক্সএন, বা আরও খারাপ) এবং এই উপাদানগুলির মধ্যে আপনি কী ধরণের গণনা চালান also :

• এনজি-শো : যদি optionচ্ছিক উপাদানগুলি প্রায়শই উপস্থিত থাকে (ঘন), যেমন 90% সময় বলে, তাদের প্রস্তুত রাখা এবং কেবল তাদের দেখানো / আড়াল করা দ্রুততর হতে পারে, বিশেষত যদি তাদের সামগ্রীগুলি সস্তা হয় (কেবল সরল পাঠ্য, কিছুই না গণনা বা লোড)। এটি মেমরি গ্রাস করে কারণ এটি গোপন উপাদানগুলির সাথে ডোম পূরণ করে, তবে ইতিমধ্যে বিদ্যমান এমন কিছু দেখান / লুকান যা সম্ভবত ব্রাউজারের জন্য সস্তা অপারেশন হতে পারে।

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

Comments

প্রযুক্তিগত তথ্যগুলির জন্য অন্যান্য উত্তর। বুদ্ধি জন্য এই এক। আপনি পরিষ্কারভাবে অ-তুচ্ছ আঙ্গুলের অ্যাপস স্যার তৈরি করেছেন! +1

— সর্বাধিক

এই সমস্যাটি কৌণিকের বাইরে চলে যায়, এটি কম্পিউটার বিজ্ঞানের একটি মৌলিক সমস্যা, এমন একটি বিষয় রয়েছে যা থেকে একটি পদ্ধতিতে অন্য পদ্ধতির চেয়ে বেশি দক্ষ। সাধারণত এটি কিছু বেঞ্চমার্কিংয়ের মাধ্যমে পাওয়া যায়। সুতরাং আপনি এমনকি আইটেম গণনার উপর নির্ভর করে একটি পদ্ধতি এবং অন্যটির

— ক্রিস্টোফ রাউসি

Answer 5

একটি গুরুত্বপূর্ণ নোট:

এনজিআইএফ (এনজিশোর বিপরীতে) সাধারণত চাইল্ড স্কোপ তৈরি করে যা অপ্রত্যাশিত ফলাফল আনতে পারে।

আমার এটি সম্পর্কিত একটি সমস্যা ছিল এবং আমি কী চলছে তা নির্ধারণ করার জন্য অনেক সময় ব্যয় করেছি।

(আমার নির্দেশিকাটি এর মডেলের মূল্যবোধগুলি ভুল সুযোগে লিখছিল was)

সুতরাং, আপনার চুল বাঁচাতে কেবল এনজি শো ব্যবহার করুন যদি না আপনি খুব ধীর গতিতে চালিত হন।

পারফরম্যান্সের পার্থক্যটি যাইহোক, সবেমাত্র লক্ষণীয় এবং আমি এখনও নিশ্চিত নই যে এটি কোন পরীক্ষা ছাড়াই কার পক্ষে?

Comments

ব্যবহার $parent.scopevarএকটি মধ্যে তথ্য বাইন্ডিং মধ্যে ngIf যখন ব্যবহার সন্তানের সুযোগ সমস্যা ভালো জিনিস দূর করবো ngIf

— meconroy

এটি সম্পূর্ণ সত্য নয় (মূল @ ব্যবহারকারী 2173353 এর মন্তব্য, এটি) that আপনি যদি ভাল অভ্যাসে লেগে থাকেন তবে আপনি কোনও সমস্যায় পড়বেন না। এটি একটি দুর্দান্ত প্রাথমিক নিয়ম: "যদি বিন্দু না থাকে তবে আপনি এটি ভুল করছেন" wrong এটি কীভাবে কাজ করে তার একটি ডেমো জন্য এখানে দেখুন: bit.ly/1SPv4wL । আরেকটি দুর্দান্ত রেফারেন্স (ভুল দেখুন # 2): bit.ly/1QfFeWd > (আমার নির্দেশনাটি তার ভুল মডেলটির মডেল মানগুলি লিখছিল )) এটি উপরের অনুশীলনের সাথে লেগে না যাওয়ার ফলাফল।

— piotr.d

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

— জেনে

ভাল যুক্তি. তবে কন্ট্রোলার এগুলি এটি একটি অ-ইস্যু করে তোলে। উদাহরণস্বরূপ, জন পপির নিয়ন্ত্রণকারী এবং ভিএম-তে গ্রহণ দেখুন ।

— jsruok

Answer 6

এনজি-যদি এনজি-অন্তর্ভুক্ত থাকে এবং এনজি-কন্ট্রোলারে এনজি-অন্তর্ভুক্ত থাকে তবে এটি আংশিক লোড করবে না এবং প্রসেস করবে না যদি না এনজি-কন্ট্রোলারে পতাকা সত্য থাকে তবে এটি নিয়ন্ত্রণকারী লোড করবে না যতক্ষণ না পতাকা হয় সত্য তবে সমস্যাটি হ'ল যখন কোনও পতাকা এনজি-তে মিথ্যা হয়ে যায়-যদি এটি ডিওএম থেকে সরিয়ে ফেলা হবে যখন পতাকাটি সত্য ফিরে আসবে তখন এটি ডমটি পুনরায় লোড করবে এই ক্ষেত্রে এনজি-শো আরও ভাল হবে, এক সময়ের জন্য এনজি-শো আরও ভাল

Answer 7

আপনি যদি ng-show or ng-hideসামগ্রীটি (উদাহরণস্বরূপ সার্ভার থেকে থাম্বনেইল) ব্যবহার করেন তবে প্রকাশের মান নির্বিশেষে লোড হবে তবে অভিব্যক্তির মানের ভিত্তিতে প্রদর্শিত হবে।

আপনি যদি ng-ifসামগ্রীটি ব্যবহার করেন তবেই এনজি-এর অভিব্যক্তিটি সত্যতার সাথে মূল্যায়ন করলে লোড হবে।

আপনি সার্ভার থেকে ডেটা বা চিত্র লোড করতে যাচ্ছেন এবং কেবলমাত্র ব্যবহারকারীদের মিথস্ক্রিয়ার উপর নির্ভর করে এগুলি দেখায় এমন পরিস্থিতিতে এনজি-ইফ ব্যবহার করা ভাল ধারণা। এইভাবে আপনার পৃষ্ঠা লোড অপ্রয়োজনীয় nw নিবিড় কাজগুলি দ্বারা অবরুদ্ধ করা হবে না।

Comments

এটি বিশেষত কার্যকর কারণ বেশিরভাগ ব্রাউজারগুলি চিত্রগুলি লোড করবে এমনকি সিএসএস তাদের ডোম কনটেইনারগুলি লুকিয়ে রাখলেও। তারা সাধারণত ট্যাগটির srcবৈশিষ্ট্য অনুসন্ধান করে img, যখন উপস্থিত হয় এটি লোড হয়!

— ক্রিস্টোফ রুসি