Angularjs - এনজি-ক্লোয়াক / এনজি-শো উপাদানগুলি ঝাপটায়

Question

আমার নির্দেশিকা / শ্রেণি ng-cloakবা কৌনিক.জেএসে একটি সমস্যা আছে ng-show।

ক্রোম সূক্ষ্মভাবে কাজ করে, তবে ফায়ারফক্স ng-cloakবা এর সাথে উপাদানগুলির ঝলক সৃষ্টি করছে ng-show। আইএমএইচও এটি রূপান্তর ng-cloak/ দ্বারা রূপান্তরিত হওয়ার কারণে ng-showঘটেছে style="display: none;", সম্ভবত ফায়ারফক্স জাভাস্ক্রিপ্ট সংকলকটি কিছুটা ধীর গতির হয়, তাই উপাদানগুলি কিছুক্ষণের জন্য উপস্থিত হয় এবং তারপরে লুকিয়ে থাকে?

উদাহরণ:

<ul ng-show="foo != null" ng-cloak>..</ul>

Comments

আপনি যদি ডিসপ্লে সেট করেন: প্রাথমিকভাবে এই উপাদানগুলিতে কোনও স্টাইল নেই, এটি কি সমস্যার সমাধান করে?

— আকোনসু

আমি এটি চেষ্টা করব, আমি ক্লাস যুক্ত করার সাথে অনুরূপ কিছু চেষ্টা করছিলাম (যা উপাদানটি লুকায়) এবং তারপরে এটি ম্যানুয়ালি মুছে ফেলা হয়েছিল, তবে এটি আরও খারাপ দেখাচ্ছে।

— মেলকোরনেমেসিস

Answer 1

যদিও ডকুমেন্টেশনটিতে এটি উল্লেখ করা হয়নি, এটি display: none;আপনার সিএসএসে নিয়ম যোগ করার পক্ষে যথেষ্ট নাও হতে পারে । আপনি যখন দেহ বা টেমপ্লেটগুলিতে কৌনিক.জেগুলি লোড করছেন সেখানে শীঘ্রই যথেষ্ট সংকলন করা হয়নি, ng-cloakনির্দেশটি ব্যবহার করুন এবং নিম্নলিখিতটি আপনার সিএসএসে অন্তর্ভুক্ত করুন:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

মন্তব্যে উল্লিখিত হিসাবে, !importantগুরুত্বপূর্ণ। উদাহরণস্বরূপ, আপনার যদি নিম্নলিখিত মার্কআপ থাকে

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

এবং আপনি ব্যবহার করে bootstrap.cssযাচ্ছেন, নিম্নলিখিত নির্বাচনকারী আপনার ng-cloak'এডি এলিমেন্টের জন্য আরও সুনির্দিষ্ট

.nav > li > a {
  display: block;
}

সুতরাং আপনি যদি সহজভাবে কোনও বিধি অন্তর্ভুক্ত করেন তবে display: none;বুটস্ট্র্যাপের বিধিটি প্রাধান্য পাবে এবং displayসেটটি সেট হয়ে যাবে block, সুতরাং আপনি টেমপ্লেট সংকলনের আগে ফ্লিকার দেখতে পাবেন।

Comments

এছাড়াও মনে রাখবেন যে আপনি যদি অ্যাসিঙ্ক্রোনাস লোডার যেমন প্রয়োজনীয়.js ব্যবহার করে কৌণিক.জেএস লোড করে থাকেন তবে এই একই সমস্যাটি ঘটতে পারে, কারণ .জেএসএস-এর সিএসএস নিয়মটি যথাসময়ে পার্স করা হবে না। উপরের সমাধানটিও এই দৃশ্যের সংশোধন করে।

— জোহান

আমার জন্য সমস্যাটি স্থির করে না। জানি না - আমার মনে হয় ব্রাউজারগুলি প্রাথমিকভাবে জিনিসগুলি দেখানোর জন্য খুব আগ্রহী ...

— অ্যান্ড্রি দ্রোজডিয়ুক

ব্রাউজারটি সিএসএস অ্যাকাউন্টে না নিয়ে এমনকি প্রথম পাসেও ডিওএম রেন্ডার করে না; এটি অত্যন্ত অদক্ষ হবে; আপনার সেটআপটি ডাবল চেক করুন: পি

— অ্যালেক্সজি

আপনি কীভাবে এনজি-ক্লকড ডোমটিকে পুনরায় বুটস্ট্র্যাপ করবেন, একবার যখন আপনি এই ডোমস মডিউল কোডটি লোড করেন?

— FutuToad

উপরে CSS আপনি সম্ভাবনা জন্য কাজ না করে তবে আপনার হয় :মধ্যে ng:cloakসঠিকভাবে পলান করা হয় না। খাঁটি সিএসএসের জন্য নিশ্চিত করুন যে ব্যাকস্ল্যাশ রয়েছে। সংকলিত সিএসএসের জন্য, যেমন স্টাইলাস, এটি হবে [ng\\:cloak]। এটি সঠিক কিনা তা নিশ্চিত করতে আপনার সংকলিত সিএসএস পরীক্ষা করে দেখুন।

— জো

Answer 2

ডকুমেন্টেশনে উল্লিখিত হিসাবে , আপনাকে এটিকে ng-cloakবৈশিষ্ট্যের উপর ভিত্তি করে এটি লুকিয়ে রাখতে আপনার সিএসএসে একটি বিধি যুক্ত করা উচিত :

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

আমরা "বিল্ট উইথ অ্যাংুলার" সাইটে অনুরূপ কৌশলগুলি ব্যবহার করি, যা আপনি গিথুব-এর উত্সটি দেখতে পারেন: https://github.com/angular/builtwith.angularjs.org

আশা করি এইটি কাজ করবে!

Comments

angular.js নথির শিরোনামে স্টাইলের নিয়ম যুক্ত করে। আপনার সিএসএসে এটি যুক্ত করার দরকার নেই। বলেছিল, এটি কাজ করে বলে মনে হচ্ছে। আমার অনুমান কারণ কৌণিক.জেএস কৌনিক লোড হওয়ার পরে পর্যন্ত মাথায় স্টাইল ব্লক যুক্ত করে না।

— ntownsend

কি সত্যিই ডকুমেন্টেশন উল্লেখ এই হল: "ভাল ফলাফলের জন্য, angular.js স্ক্রিপ্ট HTML ফাইল প্রধান বিভাগে লোড করা আবশ্যক; অন্যথায় , সিএসএস নিয়ম (উপরে) আবেদন এক্সটারনাল স্টাইলশিট মধ্যে অন্তর্ভুক্ত করা উচিত নয়। "

— অ্যান্ড্রি দ্রোজডিয়ুক

অন্য কথায়, আপনি যদি আপনার পৃষ্ঠার নীচে আপনার স্ক্রিপ্টের রেফারেন্স যুক্ত করে থাকেন (যেমন প্রচুর লোকেরা করেন); তারপরে আপনার সিএসএসে নিয়ম যুক্ত করুন।

— GFoley83

আমি প্রয়োজনীয়.js এর সাথে কৌণিক.জেগুলি যুক্ত করছিলাম, সুতরাং এটি আমাকে সাহায্য করেছিল।

— জলপাই

এইচটিএমএল উপাদানকে এনজি-অ্যাপ্লিকেশন নির্দেশকে আবাসন করার জন্য এনজি-ক্লোকার নির্দেশিকা যুক্ত করা হয়েছে। কবজির মতো কাজ করেছেন। উদাহরণ: <div ng-cloak ng-app = "my-app">

— মিনিস্কেম

Answer 3

নিশ্চিত করুন যে AngularJS headHTML এর অন্তর্ভুক্ত রয়েছে । এনজি ক্লোক ডক দেখুন :

সেরা ফলাফলের জন্য, কৌণিক.জেএস স্ক্রিপ্টটি এইচটিএমএল ফাইলের প্রধান অংশে লোড করা উচিত; বিকল্পভাবে, সিএসএস বিধি (উপরে) অবশ্যই আবেদনের বাহ্যিক স্টাইলশিটে অন্তর্ভুক্ত করতে হবে।

Comments

হ্যাঁ! আমি বুঝতে পারি না কেন সর্বত্র লোকেরা পৃষ্ঠার শেষের দিকে কৌণিক.জে গুলি লোড করার পরামর্শ দেয় to প্রথম থেকেই অ্যাংুলার নিয়ন্ত্রণ নিলে আমি আরও ভাল বোধ করি। আমার ng-cloakএখন কাজ করছে।

— ইভান ফেরার ভিলা

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

— তীক্ষ্ণ দেখুন

এবং কোনও স্টাইল শীট লোড হওয়ার আগে। কৌনিকটি headঅন্তর্ভুক্ত তবে স্টাইল শীট অন্তর্ভুক্ত করার পরে, সমস্যাটি ঠিক করা হয় না।

— AgmLauncher

Answer 4

এনজি ক্লক ব্যবহার করে আমার আর ভাগ্য হয় নি। উপরে উল্লিখিত সমস্ত কিছু সত্ত্বেও আমি এখনও ঝাঁকুনি পাই। ফ্লিকিং এড়ানোর একমাত্র নিশ্চিত উপায় হ'ল আপনার বিষয়বস্তুকে একটি টেম্পলেটে রাখা এবং টেমপ্লেটটি অন্তর্ভুক্ত করা। একটি এসপিএ-তে, একমাত্র এইচটিএমএল যা অ্যাংুলার দ্বারা সংকলিত হওয়ার আগে মূল্যায়ন করবে তা হ'ল আপনার মূল সূচক। Html পৃষ্ঠা।

কেবলমাত্র সমস্ত কিছু দেহের অভ্যন্তরে নিয়ে যান এবং এটি একটি পৃথক ফাইলে আটকে দিন এবং তারপরে:

<ng-include src="'views/indexMain.html'"></ng-include>

আপনার কখনই কোনও ঝাঁকুনি পাওয়া উচিত নয় কারণ অ্যাংুলার এটি ডিওমে যুক্ত করার আগে টেম্পলেটটি সংকলন করে।

Comments

ঠিক আমি কী ব্যবহার করি - পরিষ্কার এবং সহজ, কোনও বেদনাদায়ক হ্যাক নেই।

— দিমিত্রি জইতসেভ

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

— jsuddsjr

আমার জন্য কাজ। আপনার মার্কআপের ng-appবাইরে রাখার কথা মনে রাখবেন ng-include।

— গ্রাহামএফ

কোনও সমাধান ছাড়াই এই সমাধানটি সবচেয়ে ভাল কাজ করে। যদি সম্ভব হয় তবে এই দ্রবণটি ব্যবহার করুন।

— idungotnosn

এই সমাধানটি একটি সত্যই বিরক্তিকর পরিস্থিতি স্থির করেছে। ধন্যবাদ!

— ম্যাক্সওয়েল

Answer 5

ngBind এবং ngBindTemplate এমন বিকল্প যা সিএসএসের প্রয়োজন হয় না:

<div ng-show="foo != null" ng-cloak>{{name}}</div>  <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>

Comments

সুন্দর, সহজ উত্তর। ng-bind'কোঁকড়ানো ব্রেস ফ্ল্যাশ' এড়ানো বা ng-cloakট্যাগ পর্যায়ে ব্যবহার করার একটি ভাল উপায় , যদিও কিছু লোক মনে করেন এটি কোডটি কম পাঠযোগ্য করে তোলে। তাদের জন্য, আমি দুটি পদ্ধতির মিশ্রিত করার কোনও কারণ দেখছি না।

— ডেভ এভারিট

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

— লেগ্রামীরা

Answer 6

আপনি যদি এনজি-ক্লোকে ট্রিগার করার কোনও বিকল্প পদ্ধতি ব্যবহার করেন তবে গ্রহণযোগ্য উত্তর ছাড়াও ...

আপনি নিজের সিএসএস / কমের জন্য কিছু অতিরিক্ত বৈশিষ্ট্য যুক্ত করতে ইচ্ছুক হতে পারেন:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
    display: none !important;
}

Comments

এটি আমার ব্যবহারের ক্ষেত্রে কাজ করেছে, যখন উপরেরগুলির মধ্যে কেউ কাজটি করেছে বলে মনে হচ্ছে না।

— পোরলুন

Answer 7

আমার অনুরূপ সমস্যা ছিল এবং আমি জানতে পেরেছিলাম যে আপনার যদি এমন একটি শ্রেণি থাকে যাতে ট্রানজিশন থাকে তবে উপাদানটি ঝলকান। আমি সাফল্য ছাড়াই এনজি-ক্লোব যোগ করার চেষ্টা করেছি, তবে ট্রানজিশনটি সরিয়ে দিয়ে বোতামটি ঝলকানো বন্ধ করে দিয়েছে।

আমি আয়নিক কাঠামো ব্যবহার করছি এবং বোতাম-রূপরেখার মধ্যে এই রূপান্তর রয়েছে

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

কেবল রূপান্তরটি সরাতে ক্লাসটি ওভাররাইট করুন এবং বোতামটি জ্বলতে বন্ধ করবে stop

হালনাগাদ

এনজি-শো / এনজি-হাইড ব্যবহার করার সময় আবার আয়নিকটিতে একটি ঝাঁকুনি থাকে। নিম্নলিখিত সিএসএস যুক্ত করা এটি সমাধান করে:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

সূত্র: http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

Comments

কিন্তু সেই এনজি-হাইড / শো নির্দেশের জন্য অ্যানিমেশনগুলি অক্ষম করবে না?

— কুশাগ্রা গুর

মনে নেই। আপনি এটি ব্যবহার করে দেখেছেন এবং এটি অ্যানিমেশনগুলিকে অক্ষম করেছে?

— সেব ফ্যানালস

ধন্যবাদ। এটি আয়নিকের উপর একটি খুব বিশেষ সমস্যা। আমি .button-clear, .button-icon, .button-outline { @include transition(opacity 0s); }আমার scss যোগ ।

— hgoebl

Answer 8

আমার একটি সমস্যা হয়েছিল যেখানে <div ng-show="expression">এনজি-শো নির্দেশিকাটি চালনার সুযোগ পাওয়ার আগে "এক্সপ্রেশন" প্রাথমিকভাবে মিথ্যা হলেও যদিও প্রথমটিতে একটি সেকেন্ডের ভগ্নাংশের জন্য দৃশ্যমান হবে।

আমি যে সমাধানটি ব্যবহার করেছি তা হ'ল ম্যানুয়ালি "এনজি-লুকান" শ্রেণিটি যুক্ত করা, <div ng-show="expression" ng-hide>এটি প্রাথমিকভাবে লুকানো শুরু হয়েছে তা নিশ্চিত করে। এনজি-শো নির্দেশের পরে প্রয়োজনীয় হিসাবে এনজি-হাইড ক্লাস যুক্ত / সরানো হবে।

Comments

বাহ, আমি চেষ্টা করেছি এমন সমস্ত ফ্রিকিং বিকল্পগুলির মধ্যে, এটি কৌশলটি করেছে। ধন্যবাদ!

— নিকোলা

সব থেকে ভালো সমাধান! এটি আমাকে কয়েক মাস ধরে পাগল করেছে! ধন্যবাদ!

— অ্যাবেলাবেসনবী

আমি আয়নিক কাঠামো ব্যবহার করছি এবং এটিই কেবলমাত্র উত্তর যা আসলে কাজ করে

— মাইকেল

Answer 9

ফায়ারব্যাগ বন্ধ করার চেষ্টা করুন । আমি সিরিয়াস। এটি আমার ক্ষেত্রে সহায়তা করে।

স্বীকৃত উত্তর প্রয়োগ করুন এবং তারপরে আপনার ফায়ারফক্সে ফায়ারব্যাগ বন্ধ আছে তা নিশ্চিত করুন : F12 টিপুন এবং এই পৃষ্ঠার জন্য ফায়ারব্যাগটি বন্ধ করুন - উপরের ডানদিকে ছোট বোতাম।

Comments

হ্যাঁ আমার জন্য এটি করেছে ধন্যবাদ!

— মেডেইনড্রাইমস

ধন্যবাদ, এটি আমাকে পাগল করে তুলেছিল। অদ্ভুত বাগ

— স্টিফেন সিম্পসন

Answer 10

এখানে দুটি পৃথক সমস্যা রয়েছে যা ঝাঁকুনির সমস্যার কারণ হতে পারে এবং আপনি উভয় একটির মুখোমুখি হতে পারেন।

সমস্যা 1: এনজি-লম্বা খুব দেরিতে প্রয়োগ করা হয়

এই পৃষ্ঠার উত্তরগুলির মধ্যে অনেকগুলি উত্তর হিসাবে যেমন এঙ্গুলারজেএস মাথায় লোড হয়েছে তা নিশ্চিত করার জন্য এই সমস্যাটি সমাধান করা হয়েছে। এনজি ক্লোক ডক দেখুন :

সেরা ফলাফলের জন্য, কৌণিক.জেএস স্ক্রিপ্টটি এইচটিএমএল ফাইলের প্রধান অংশে লোড করা উচিত; বিকল্পভাবে, সিএসএস বিধি (উপরে) অবশ্যই আবেদনের বাহ্যিক স্টাইলশিটে অন্তর্ভুক্ত করতে হবে।

সমস্যা 2: এনজি-লম্বা খুব শীঘ্রই সরানো হবে

যখন আপনার পৃষ্ঠায় প্রচুর সিএসএস থাকে তখন নিয়মগুলি একে অপরের উপর ঝাঁকুনি দেওয়া এবং শীর্ষ স্তর প্রয়োগ করার আগে সিএসএসের গভীর স্তরগুলি ফ্ল্যাশ হয় যখন এই সমস্যাটি সম্ভবত ঘটে থাকে।

style="display:none"আপনার উপাদানটিতে যুক্ত জবাবগুলির সমাধানগুলিতে এই সমস্যাটিকে এতক্ষণ সমাধান করা যায় যতক্ষণ শৈলীটি দেরিতে যথেষ্ট সরানো হয় (আসলে এই সমাধানগুলি উভয় সমস্যার সমাধান করে)। তবে আপনি যদি সরাসরি আপনার এইচটিএমএলে শৈলী যুক্ত না করা পছন্দ করেন তবে আপনি একই ফলাফল ব্যবহার করে অর্জন করতে পারেন ng-show।

প্রশ্ন থেকে উদাহরণ দিয়ে শুরু:

<ul ng-show="foo != null" ng-cloak>..</ul>

আপনার উপাদানটিতে একটি অতিরিক্ত এনজি-শো বিধি যুক্ত করুন:

<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>

( ng-cloakসমস্যা 1 এড়াতে আপনার চালিয়ে যাওয়া দরকার) 1।

তারপরে আপনার অ্যাপ.আরনে সেট করুন isPageFullyLoaded:

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$safeApply = function (fn) {
        $rootScope.isPageFullyLoaded = true;
    }
}]);

আপনি কী করছেন ঠিক তার উপর নির্ভর করে সচেতন হন, অ্যাপ.আরুন সেট করার সেরা জায়গা হতে পারে বা নাও হতে পারে isPageFullyLoaded। গুরুত্বপূর্ণ বিষয়টি হ'ল এটি নিশ্চিত করা যে isPageFullyLoadedএটি আপনি ঠিকঠাক করতে চান না তা যা যা ব্যবহারকারীর কাছে প্রকাশিত হওয়ার জন্য প্রস্তুত তা না হয়ে পরে to

মনে হচ্ছে সমস্যা 1 হ'ল সমস্যাটি ওপি চাপ দিচ্ছে, তবে অন্যরা সন্ধান করছে যে সমাধানটি কাজ করে না বা কেবল আংশিকভাবে কাজ করে কারণ তারা সমস্যাটি 2 এর পরিবর্তে বা পাশাপাশি হিট করছে।

গুরুত্বপূর্ণ দ্রষ্টব্য: এনজি-ক্লোকার উভয় ক্ষেত্রেই সমাধানগুলি প্রয়োগ করা নিশ্চিত হন এবং খুব শীঘ্রই সরানো হয়েছে। এর মধ্যে একটি মাত্র সমস্যার সমাধান লক্ষণগুলি থেকে মুক্তি দিতে পারে না।

Comments

এটি আমার জন্য এটি স্থির হয়েছে "স্ক্রিপ্ট অবশ্যই মাথা বিভাগে লোড করা উচিত"

— আলিওপি

Answer 11

আমরা আমাদের সংস্থায় এই সমস্যায় পড়েছি এবং সেই ঝাঁকুনিতে এনজি-শো উপাদানগুলির জন্য সিএসএস স্টাইলিংয়ে "প্রদর্শন: কিছুই নয়" যুক্ত করে এটি সমাধান করেছি। আমাদের মোটেও এনজি-ক্লাব ব্যবহার করতে হয়নি। এই থ্রেড অন্যদের থেকে ভিন্ন, আমরা সাফারি Firefox বা Chrome এ কিন্তু এই সমস্যার সম্মুখীন হন - সম্ভবত কারণে সহ iOS7 মধ্যে সাফারি এর অলস নূতনে রঙ বাগ ।

Answer 12

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

ঝাঁকুনির সাথে আমার রান-ইন করার সাথে সাথে, আমি ডেভটুলগুলি খোলা এবং ক্যাশে অক্ষম করে দিয়ে পরীক্ষা করছিলাম। ক্যাচিং সক্ষম করে প্যানেলটি বন্ধ করে দেওয়া আমার সমস্যার সমাধান করেছে।

Answer 13

নীচের বিবৃতিগুলি মাথায় রেখে এই সমস্যাটি স্থির করে

<style type="text/css">
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
</style>

অফিসিয়াল ডকুমেন্টেশন

Answer 14

আমি এই পদ্ধতিগুলির কোনও কাজ করতে পারি না, তাই শেষ পর্যন্ত আমি নিম্নলিখিতটি করেছিলাম did যে উপাদানটির জন্য আপনি প্রাথমিকভাবে লুকিয়ে থাকতে চান তার জন্য:

<div <!--...--> style="display: none;" ng-style="style">

তারপরে আপনার নিয়ামকটিতে এটিকে উপরে বা নিকটে সংযুক্ত করুন:

$scope.style = { display: 'block' };

এইভাবে, উপাদানটি প্রাথমিকভাবে লুকানো থাকে এবং কেবল তখনই প্রদর্শিত হয় যখন কন্ট্রোলার কোডটি আসলে চলে।

আপনি আপনার প্রয়োজনে স্থান নির্ধারণ করতে পারেন, সম্ভবত কিছু যুক্তি যুক্ত করতে পারেন। আমার ক্ষেত্রে, আমি বর্তমানে লগইন না থাকলে একটি লগইন পথে স্যুইচ করি এবং আমার ইন্টারফেসটি আগে থেকে ঝলকানি চাই না, তাই $scope.styleলগ-ইন চেকের পরে সেট করেছিলাম ।

Answer 15

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

Comments

তবে এটি

— ডোমের

Answer 16

আমি আয়নিক কাঠামো ব্যবহার করছি, সিএসএস শৈলী যুক্ত করা কিছু পরিস্থিতিতে নাও পারে, আপনি এনজি-শো / এনজি-লুকের পরিবর্তে এনজি-ইফ ব্যবহার করার চেষ্টা করতে পারেন

রেফ: https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=ng-show+hide+ ফ্লিকারিং +in+ios&source=bl&ots=m2Turk8DFh&sig=8hNiWx26euxiajx2s8s8s8s8s8s8s8s8x8x8c এবং জেন্সি = onepage & Q = NG-প্রদর্শনী% 20hide% 20flickering% 20in% 20ios & F = মিথ্যা

Answer 17

আপনি কৌনিক নথির আরও ভাল রেফারেন্স চাইবেন, তবে সংস্করণ [1.4.9] এর নীচে আপডেট হয়েছে যা এটি ডেটা-এনজি-ক্লোকার নির্দেশকে সমর্থন করতে পারে।

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

Answer 18

আমি উপরের এনজি-ক্লোকার সমাধানটি চেষ্টা করেছিলাম তবে ফায়ারফক্সের সাথে এর মাঝে মাঝে মাঝে সমস্যা রয়েছে। আমার পক্ষে একমাত্র কাজের যে কাজটি করেছিল তা হ'ল অ্যাংুলার সম্পূর্ণরূপে লোড না হওয়া পর্যন্ত ফর্মটি লোড করতে বিলম্ব করা।

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

<div ng-app="myApp" ng-init="loaded='yes'"> 
   <form ng-if="loaded.length > 0">
      <!--all my elements here-->
   </form>
</div>

Answer 19

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

ডকস বলছে "সর্বোত্তম ফলাফলের জন্য, কৌণিক.জেএস স্ক্রিপ্টটি এইচটিএমএল নথির প্রধান বিভাগে লোড করা আবশ্যক; বিকল্প হিসাবে উপরের সিএসএস বিধিটি অবশ্যই অ্যাপ্লিকেশনটির বাহ্যিক স্টাইলশিটে অন্তর্ভুক্ত করতে হবে।"

এখন, এটি কোনও বাহ্যিক স্টাইলশিট হতে হবে না কেবল মাথার একটি উপাদান হিসাবে।

<style type="text/css">
  .ng-cloak {
    display: none !important;
  }
</style>

উত্স: https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 20

আমি এখানে পোস্ট প্রতিটি সমাধান চেষ্টা করেছিলাম এবং এখনও ফায়ারফক্সে ঝলকানি পেয়েছি।

যদি এটি কাউকে সহায়তা করে তবে আমি এটিকে style="display: none;"মূল বিষয়বস্তু ডিভিতে যুক্ত করে সমাধান করেছি , তারপরে $('#main-div-id').show();সার্ভার থেকে ডেটা পাওয়ার পরে সমস্ত কিছু লোড হয়ে গেলে jQuery (আমি ইতিমধ্যে পৃষ্ঠায় এটি ব্যবহার করছিলাম) ব্যবহার করে ;

Comments

আমি এটি খুঁজে পেলাম যে এটিই আমার জন্য কাজ করেছিল, তবে আমি জিকুয়েরি ব্যবহার এড়াতে চেয়েছিলাম যাতে এর বিকল্প খুঁজে পাওয়া যায়। আমার উত্তর এখানে দেখুন: stackoverflow.com/a/42527700/4214694

— অ্যান্ড্রু ডাউনস

Answer 21

আমি আসলে রিক স্ট্রহলের ওয়েব লগের পরামর্শটি পেয়েছি যে আমার সমস্যাটি পুরোপুরি ঠিক করে দেওয়া হয়েছে (যেহেতু, বিশেষত ফায়ারব্যাগ চলাকালীন সময়ে আমি এনজি-ক্লোবাক জ্বলজ্বলে কাঁচা {{কোড with with নিয়ে এখনও অদ্ভুত সমস্যাটি পেয়েছি):

পারমাণবিক বিকল্প: সামগ্রীটি ম্যানুয়ালি লুকিয়ে রাখা

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

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

অ্যাংুলার নিয়ন্ত্রণ অর্জনের পরে আপনি ম্যানুয়ালি সামগ্রীটি আড়াল করতে এবং এটিকে দৃশ্যমান করতে পারেন। এটি করার জন্য আমি ব্যবহার করেছি:

<div id="mainContainer" class="mainContainer boxshadow"
    ng-app="app" style="display:none">

প্রদর্শন লক্ষ করুন: কোনও শৈলী নয় যা পৃষ্ঠায় প্রাথমিকভাবে উপাদানটিকে স্পষ্টভাবে আড়াল করে।

তারপরে একবার কৌণিকর তার সূচনাটি চালু হয়ে কার্যকরভাবে পৃষ্ঠায় টেম্পলেট মার্কআপ প্রক্রিয়া করে আপনি সামগ্রীটি প্রদর্শন করতে পারেন। কৌণিকের জন্য এই 'প্রস্তুত' ইভেন্টটি হ'ল অ্যাপ.আরুন () ফাংশন:

app.run( function ($rootScope, $location, cellService) {        
    $("#mainContainer").show();
    …
});

এটি কার্যকরভাবে প্রদর্শনটি সরিয়ে দেয়: কোনও স্টাইল এবং সামগ্রী প্রদর্শন করে না। অ্যাপ্লিকেশন.আরুন () আগুন দেওয়ার সময় ডিওএম ভরা তথ্য বা কমপক্ষে খালি ডেটা দিয়ে প্রদর্শন করতে প্রস্তুত - কৌণিক নিয়ন্ত্রণ পেয়েছে।

Comments

আমি এটি খুঁজে পেলাম যে এটিই আমার জন্য কাজ করেছিল, তবে আমি জিকুয়েরি ব্যবহার এড়াতে চেয়েছিলাম যাতে এর বিকল্প খুঁজে পাওয়া যায়। আমার উত্তর এখানে দেখুন: stackoverflow.com/a/42527700/4214694

— অ্যান্ড্রু ডাউনস

Answer 22

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

Answer 23

উপরের আলোচনা থেকে এএস

[ng-cloak] {
                display: none;
            }

সমস্যা সমাধানের সঠিক উপায় way

Answer 24

আমি পপআপগুলি দেখানোর জন্য এবং লুকানোর জন্য একটি নির্দেশে এনজি-শো ব্যবহার করছি।

<div class="..." ng-show="showPopup">

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

<div class="..." ng-show="showPopup" ng-if="popupReady">

এরপরে আমি সময় নির্ধারণের সাথে এই নির্দেশিকার দায়িত্বে থাকা নিয়ামকটিতে আরম্ভটি যুক্ত করেছি:

$timeout(function () {
    $scope.popupReady = true;
});

এইভাবে আমি ঝাঁকুনির সমস্যাটি দূর করেছি এবং প্রতি একক ক্লিকে DOM সন্নিবেশনের ব্যয়বহুল ক্রিয়াকলাপটি এড়িয়ে চলেছি। এটি একের পরিবর্তে একই উদ্দেশ্যে দুটি স্কোপ ভেরিয়েবল ব্যবহারের ব্যয়ে এসেছিল তবে এখন পর্যন্ত এটি অবশ্যই সেরা বিকল্প।

Answer 25

চেষ্টা করা ng-cloakহলেও সংক্ষিপ্ত জ্বলজ্বলে। নীচের কোডগুলি এগুলি সম্পূর্ণরূপে মুক্তি দেয়।

<body style="display:none;" ng-style="{'display':'block'}">

Answer 26

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

$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});

মূলত যখন স্কোপ.ওয়াচকে এই ক্ষেত্রে ফায়ার করা হয়, তখন AngularJS নামের পরিবর্তনশীল (মডেল.ভ্যালু) এর পরিবর্তনগুলি পর্যবেক্ষণ করে

Answer 27

আমি <ul>একটি দিয়ে মোড়ানো হবে<div ng-cloak>

Comments

তার মোড়কের দরকার নেই <ul>। ng-cloakএটি যে কোনও উপাদানটিতে প্রয়োগ করা হবে তেমনি সেই উপাদানটির বংশধরদেরও এটি আবদ্ধ করবে।

— বিটিফোর্ড

Answer 28

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

যা হত আগে <div class="options-modal" ng-show="showOptions"></div>

এখন: <div class="options-modal" ng-class="{'show': isPrintModalShown}">

display: noneডিফল্টরূপে বিকল্পগুলি-মডেল শ্রেণীর জন্য সিএসএস রয়েছে । শো ক্লাসে display:blockসিএসএস রয়েছে ।

Answer 29

লাইন বিরতি এড়ানো

<meta http-equiv="Content-Security-Policy"              content="
default-src 'FOO';   
script-src 'FOO';    
style-src  'FOO'; 
font-src 'FOO';">

ফায়ারফক্স 45.0.1 সঙ্গে কাজ করে

<meta http-equiv="Content-Security-Policy"              content="    default-src 'FOO';    script-src 'FOO';     style-src  'FOO';    font-src 'FOO';">