পপ-আপগুলি সর্বাধিক মার্জিত উপায় দেখান

178

আমার এই অ্যাঙ্গুলারজেএস অ্যাপ রয়েছে। সবকিছু ঠিকঠাক কাজ করে।

নির্দিষ্ট শর্তগুলি সত্য হয়ে উঠলে এখন আমার আলাদা পপ-আপগুলি দেখাতে হবে এবং আমি ভাবছিলাম যে এগিয়ে যাওয়ার সর্বোত্তম উপায়টি কী হবে।

বর্তমানে আমি দুটি বিকল্প মূল্যায়ন করছি, তবে আমি অন্য বিকল্পগুলির জন্য একেবারে উন্মুক্ত।

বিকল্প 1

আমি পপ-আপের জন্য নতুন এইচটিএমএল উপাদান তৈরি করতে এবং সরাসরি নিয়ামক থেকে ডিওএম এ যুক্ত করতে পারি।

এটি এমভিসি ডিজাইনের ধরণটি ভেঙে দেবে। আমি এই সমাধানে খুশি নই।

বিকল্প 2

আমি সবসময় স্থির এইচটিএমএল ফাইলের সমস্ত পপ-আপগুলির জন্য কোড প্রবেশ করিয়ে দিতে পারি could তারপরে, ব্যবহার করে ngShow, আমি কেবল সঠিক পপ-আপকে আড়াল / প্রদর্শন করতে পারি।

এই বিকল্পটি সত্যই স্কেলযোগ্য নয়।

সুতরাং আমি নিশ্চিত যে আমি যা চাই তা অর্জনের আরও ভাল উপায় থাকতে হবে।

— ব্রুনো
সূত্র

অসংখ্য উপায়, HTML- এর জন্য নিয়ামক defintiely না ভালো উপায়, UI 'তে বুটস্ট্র্যাপ মোডাল এ বর্ণন angular-ui.github.com/bootstrap/#/modal

— charlietfl

1

অ্যাঙ্গুলারজেএস এর ডক্স ' ট্রান্সক্লুশান এবং স্কোপগুলি বোঝার ' বিভাগের অধীনে কীভাবে পপআপগুলি পরিচালনা করবেন সে সম্পর্কে কিছুটা ব্যাখ্যা করে । আশাকরি এটা সাহায্য করবে.

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

আপনি যদি সত্যিই পপআপগুলি দিয়ে স্কেল করতে চান তবে পপস্ক্রিপ্টটি পরীক্ষা করে দেখুন ।

— রাজ নাথানী

88

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

আমরা যখন এটির বিষয়ে চিন্তা করি তখন মোডালগুলি ধরণের অ্যাঙ্গুলারজেএস রুট তবে কেবল মডেল পপআপে প্রদর্শিত হয়।

অ্যাঙ্গুলারআইআই বুটস্ট্র্যাপ প্রকল্পের ( http://angular-ui.github.com/bootstrap/ ) একটি দুর্দান্ত $modalপরিষেবা রয়েছে (যা সংস্করণ 0.6.0 এর আগে ডায়ালগ নামে পরিচিত) এটি আংশিক বিষয়বস্তু প্রদর্শন করার জন্য একটি পরিষেবা হিসাবে কাজ করে একটি মডেল পপআপ

— pkozlowski.opensource
সূত্র

10

$ ডায়ালগ এখন $ মোডাল হল

— সংগ্রাম সিং

1

@ pkozlowski.opensource আমি ইউআই-বুটস্ট্র্যাপের মতামত পছন্দ করি তবে মডেলের মাধ্যমে আমি সামগ্রী লিখিতভাবে দেখতে পাচ্ছি না। আমি এটি নিয়ে কিছু গবেষণা করেছি এবং অন্যান্য লোকদেরও এই সমস্যা রয়েছে তা দেখুন।

— Justopi

2

ওয়েবলগস.এএসপি.এন.এইচ.ডাহহলিন / বিল্ডিং- অ্যান-ইঙ্গুলারজস-মডেল-সার্ভিসটি আমি এই শৈল্পিকটিকে খুব দরকারী বলে মনে করি।

— জেননড

কেবল উল্লেখ করার জন্য, কোনও পরিষেবা DOM অ্যাক্সেস করা উচিত নয়। একটি নির্দেশ এটির জন্য জায়গা।

— সুপারলিউনারি

1

@ সুপারলুমিনারি এটি অনুসরণ করা সত্যই একটি সাধারণ সাধারণ নিয়ম, তবে একটি নির্দিষ্ট নিয়ম কেন গতিতে রয়েছে তা জেনে রাখা এবং এই জাতীয় নিয়ম কখন ভেঙে যেতে পারে (বা এমনকি হওয়া উচিত!) তাও godশ্বর । আমি বিশ্বাস করি যে মডেলগুলি / সরঞ্জামদ্বারা এবং এ জাতীয় পছন্দগুলি ব্যতিক্রম। সংক্ষেপে: আমাদের বিধিগুলি জানতে হবে তবে সেগুলি প্রযোজ্য / প্রয়োগ হয় না সে প্রসঙ্গেও বুঝতে হবে।

— pkozlowski.opensource

29

এটি মজার কারণ কারণ আমি নিজেই কৌণিক শিখছি এবং ইউটিউবে তাদের চ্যানেল থেকে কিছু ভিডিও দেখছিলাম। স্পিকার এই ভিডিওটিতে আপনার সঠিক সমস্যার কথা উল্লেখ করেছে https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 28:30 মিনিটের চিহ্নের কাছাকাছি।

এটি কোডের নির্দিষ্ট অংশটি কোনও পরিষেবাতে রেখে বরং নিয়ামক হিসাবে নেমে আসে।

আমার ধারণাটি হ'ল নতুন পপআপ উপাদানগুলি ডিওএম-তে ইনজেক্ট করা এবং একই উপাদানটি দেখানোর এবং লুকানোর পরিবর্তে সেগুলি পৃথকভাবে পরিচালনা করা। এইভাবে আপনার একাধিক পপআপ থাকতে পারে।

পুরো ভিডিওটি দেখতে খুব আকর্ষণীয় :-)

— বার্ট
সূত্র

2

মিসকো কৌনিকের বীজ! (বাওয়া হা হা) সিরিয়াসলি। যেমন তার কথা বিবেচনা কৌণিক জন্য নির্ধারক উৎস।

— ডেক

14

একটি 'পপআপ' নির্দেশিকা তৈরি করুন এবং পপআপ সামগ্রীর ধারকটিতে এটি প্রয়োগ করুন
নির্দেশে, সামগ্রীর নিচে মাস্ক ডিভের সাথে নিখুঁত অবস্থানে ডিভ করে নিন।
দিকনির্দেশনার মধ্যে থেকে প্রয়োজনীয় হিসাবে ডিওএম গাছে 2 ডিভগুলি সরানো ঠিক। কোনও ইউআই কোড পর্দার মাঝে পপআপ স্থাপনের কোড সহ নির্দেশাবলীতে ঠিক আছে।
কন্ট্রোলারে একটি বুলিয়ান পতাকা তৈরি এবং বাঁধুন। এই পতাকাটি দৃশ্যমানতা নিয়ন্ত্রণ করবে।
স্কেপ ভেরিয়েবলগুলি তৈরি করুন যা ঠিক আছে / বাতিল কার্যাদি ইত্যাদির সাথে বন্ধন করে etc.

একটি উচ্চ স্তরের উদাহরণ যুক্ত করতে সম্পাদনা করা (অকার্যকর)

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



.directive('popup', function() {
  var p = {
      link : function(scope, iElement, iAttrs){
           //code to wrap the div (iElement) with a abs pos div (parentDiv)
          // code to add a mask layer div behind 
          // if the parent is already there, then skip adding it again.
         //use jquery ui to make it dragable etc.
          scope.watch(showPopup, function(newVal, oldVal){
               if(newVal === true){
                   $(parentDiv).show();
                 } 
              else{
                 $(parentDiv).hide();
                }
          });
      }


   }
  return p;
});

— Ketan
সূত্র

watch 'ওয়াচ' এর পরিবর্তে দেখুন। এছাড়াও 'শোপপআপ' এর পরিবর্তে 'পপআপ' হওয়া উচিত নয় scope.watch(showPopup, function(newVal, oldVal){?

— সংগ্রাম সিং

14

কৌণিকের সাথে মডেল কথোপকথনের সহজ উপায় এবং বুটস্ট্র্যাপের প্রয়োজন ছাড়াই http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ দেখুন

সম্পাদনা: আমি তখন থেকে http://playastore.github.io/ng ডায়ালগ থেকে এনজি-ডায়ালগ ব্যবহার করে আসছি যা নমনীয় এবং কোনও নির্ভরতা নেই।

— নিক দাও
সূত্র

1

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

— জাস্টোপি

3

সত্য তবে আমি মনে করি একাধিক পপআপ দুর্বল UI হতে পারে।

— নিক দাও

ওয়েল প্লাগইন উত্তর আমি খুঁজছিলাম ছিল!

— আন্দ্রেস ফিলিপ

7

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

— user2203937
সূত্র

5

কৌণিক-বুটস্ট্র্যাপ 0.6 এর পরে $ মডেলের সাথে $ ডায়ালগটি প্রতিস্থাপন করেছে। তার অর্থ আপনার code ডায়ালগটি ব্যবহার করা হয় এমন সমস্ত কোড পরিবর্তন করা উচিত যেমন এটি অবহিত করা হয়েছে এবং এটিকে $ মডেলে লিখতে হবে

— মোহাম্মদ উমির খান