কৌণিক.এলিমেন্ট বনাম ডকুমেন্ট.জেটলেমেন্টবিআইআইডি অথবা স্পিন (ব্যস্ত) নিয়ন্ত্রণের সাথে জিকুয়েরি নির্বাচক

Question

আমি এখানে নথিবদ্ধ হিসাবে স্পিন নিয়ন্ত্রণের "অ্যাংুলারাইজড" সংস্করণটি ব্যবহার করছি: http://blog.xvitcoder.com/adding-a-weel-progress-indicator-to-your-angularjs-application/

দেখানো সমাধান সম্পর্কে আমি যে জিনিসগুলি পছন্দ করি না তার মধ্যে একটি হ'ল পরিষেবাটিতে jQuery ব্যবহার যা স্পষ্ট নিয়ন্ত্রণকে DOM উপাদানকে কার্যকরভাবে সংযুক্ত করে। আমি উপাদানটি অ্যাক্সেস করতে কৌনিক গঠন ব্যবহার করতে পছন্দ করব। আমি স্পিনারের পরিষেবাটির মধ্যে যে উপাদানটি সংযুক্ত করতে হবে তার পরিবর্তে আইডিটিকে "হার্ড-কোডিং" এড়াতে চাইব এবং পরিবর্তে কোনও নির্দেশিকা ব্যবহার করুন যা সেবার আইডি সেট করে (সিঙ্গলটন) যাতে পরিষেবাটির অন্যান্য ব্যবহারকারীরা বা পরিষেবা নিজেই এটি জানতে হবে না।

আমি কৌণিক.এলিমেন্টটি আমাদের সাথে কী ডকুমেন্টে দেয় সে বিষয়ে লড়াই করছি। একই উপাদান আইডিতে আমাদের কী ডকুমেন্ট.জেট এলিমেন্টবাইআইডি দেয়। যেমন। এইটা কাজ করে:

  var target = document.getElementById('appBusyIndicator');

এগুলির কোনওটিই করেন না:

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

আমি পরিষ্কারভাবে এমন কিছু করছি যা মোটামুটি সুস্পষ্ট ভুল হওয়া উচিত! কেউ সাহায্য করতে পারেন?

ধরে নিচ্ছি যে আমি উপরের কাজটি পেতে পারি, উপাদানটিতে jQuery অ্যাক্সেস প্রতিস্থাপন করার চেষ্টা করার সাথে আমার একই সমস্যা রয়েছে: যেমন $(target).fadeIn('fast'); কাজ করে angular.element('#appBusyIndicator').fadeIn('fast')বা angular.element('appBusyIndicator').fadeIn('fast')না

কেউ আমাকে ডকুমেন্টেশনের একটি ভাল উদাহরণের দিকে নির্দেশ করতে পারেন যা ডিওএম উপাদান বনাম একটি কৌণিক "উপাদান" এর ব্যবহারকে স্পষ্ট করে? কৌণিক স্পষ্টতই উপাদানটিকে তার নিজস্ব বৈশিষ্ট্য, পদ্ধতি ইত্যাদি দিয়ে "মোড়ানো" করে তবে মূল মূল্য পাওয়া প্রায়শই শক্ত। উদাহরণস্বরূপ, যদি আমার কোনও <input type='number'>ক্ষেত্র থাকে এবং আমি ইউআই-তে দৃশ্যমান মূল বিষয়বস্তুগুলিতে অ্যাক্সেস করতে চাই যখন ব্যবহারকারী টাইপ করে "-" (উদ্ধৃতি ব্যতীত) আমি কিছুই পাই না কারণ সম্ভবত "টাইপ = সংখ্যা" এর অর্থ কৌনিকটি প্রত্যাখ্যান করছে ইনপুটটি এটি ইউআইতে দৃশ্যমান হওয়া সত্ত্বেও এবং আমি এটি দেখতে চাই তাই আমি এটির জন্য পরীক্ষা করে এটি পরিষ্কার করতে পারি can

কোন পয়েন্টার / উত্তর প্রশংসা।

ধন্যবাদ।

Comments

যদি আপনি jQuery লোড করছেন তবে কৌণিক.এলিমেন্টটি একটি jQlite অবজেক্ট বা jQuery অবজেক্ট।

— নিল

Answer 1

এটি এর মতো কাজ করতে পারে :

var myElement = angular.element( document.querySelector( '#some-id' ) );

আপনি কলটিতে Document.querySelector()নেটিভ জাভাস্ক্রিপ্ট কলটি মোড়ানো angular.element()। সুতরাং আপনি সর্বদা একটি jqLite বা jQuery অবজেক্টে এলিমেন্টটি পাবেন , jQueryএটি উপলব্ধ / লোড কিনা তা নির্ভর করে ।

এর জন্য অফিসিয়াল ডকুমেন্টেশন angular.element:

যদি jQuery এর পাওয়া যায়, angular.elementএকটি ওরফে হয় jQueryফাংশন। JQuery এর প্রাপ্তিসাধ্য না থাকলে, angular.elementপ্রতিনিধিদের কৌণিক গুলি বিল্ট-ইন এর উপসেট jQuery, যে বলা হয় "jQuery এর Lite" বা jqLite ।

এর মধ্যে সমস্ত উপাদান উল্লেখ Angularসর্বদা jQuery বা jqLite(যেমন একটি উপাদান সংকলন বা লিঙ্ক ফাংশন মধ্যে উপাদান আর্গুমেন্ট) দিয়ে মোড়ানো থাকে । এগুলি কখনই কাঁচা DOMউল্লেখ নেই।

আপনি যদি ভাবছেন যে কেন ব্যবহার করবেন document.querySelector(), দয়া করে এই উত্তরটি পড়ুন ।

Comments

যে কোনও কারণে কেউ ডকুমেন্ট.কোয়ারী নির্বাচনকারী ('# ...') কে কেবল ডকুমেন্ট.জেটএলমেন্টবিআইআইডি () ব্যবহার করতে পছন্দ করবেন?

— কাতো

আপনি এটি কৌণিক উপাদানটিতেও করতে পারেন: var elDivParent = কৌণিক.এলিমেন্ট (এলেম [0] .কোয়ারসিলেক্টর ('# an-id')) ;, এলিম একটি কৌণিক উপাদান being এইভাবে আপনি কোনও উপাদানটির ভিতরে অনুসন্ধান করতে পারেন। ইউনিট পরীক্ষার জন্য দরকারী।

— unludo

আরো তথ্য @Kato এই উত্তর । আশা করি এইটি কাজ করবে.

— কায়সার

Google মানচিত্র API সঙ্গে কাজ, এবং এই কাজ: var autocomplete = new google.maps.places.Autocomplete( $document[0].querySelector('#address'), { types: ['geocode'], componentRestrictions: {country: 'us'} } );। টিপ @ কেজারের জন্য ধন্যবাদ কোনও কারণে, মানচিত্রের এপিআই অভিযোগ করেছে যে আমি প্রথম প্যারামে যা দিয়েছি তা ব্যবহার করার সময় একটি ইনপুট ছিল না angular.element(document.querySelector('#address')), তবে সমস্ত কিছু ভালভাবে শেষ হয়েছে।

— nymo

Answer 2

আপনার যদি এখনও না থাকে তবে আপনার কৌণিক উপাদান ডকসটি পড়তে হবে , তাই আপনি বুঝতে পারবেন কী কি জকিএলাইট দ্বারা সমর্থিত এবং কোনটি-জিক্লাইট কোণের মধ্যে তৈরি জেকুরির একটি উপসেট।

সেই নির্বাচকরা একা থেকে jqLite নিয়ে কাজ করবেন না আইডি দ্বারা নির্বাচকরা সমর্থিত নয়।

  var target = angular.element('#appBusyIndicator');
  var target = angular.element('appBusyIndicator');

সুতরাং, হয়:

• আপনি একা jqLite ব্যবহার করেন, jquery এর চেয়ে বেশি সীমাবদ্ধ তবে বেশিরভাগ পরিস্থিতিতে যথেষ্ট।
• অথবা আপনি আপনার অ্যাপ্লিকেশনটিতে সম্পূর্ণ jQuery lib অন্তর্ভুক্ত করেন এবং আপনার যে জায়গাগুলিতে সত্যিই jquery প্রয়োজন সেখানে এটিকে স্বাভাবিক jquery এর মতো ব্যবহার করুন।

সম্পাদনা করুন: নোট করুন যে jQLite কে অগ্রাধিকার দিতে কৌনিক জেএসের আগে jQuery লোড করা উচিত :

রিয়েল জিকুয়েরি সর্বদা jqLite এর চেয়ে বেশি অগ্রাধিকার নেয়, তবে এটি প্রদান করা হবে যে এটি ডমকন্টেন্টলয়েড ইভেন্টটি চালানোর আগে লোড করা হয়েছিল।

সম্পাদনা 2: আমি আগে প্রশ্নের দ্বিতীয় অংশটি মিস করেছি:

সমস্যাটি <input type="number">, আমি মনে করি এটি একটি কৌণিক সমস্যা নয়, এটি নেটিভ এইচটিএমএল 5 নম্বর উপাদানের উদ্দেশ্যমূলক আচরণ ।

আপনি এটি jquery এর সাথে .val()বা কাঁচা .valueবৈশিষ্ট্যের সাথে পুনরুদ্ধার করার চেষ্টা করলেও এটি কোনও অ-সংখ্যাীয় মান ফিরে আসবে না ।

Comments

আমাদের কাছে পূর্ণ jQuery লাইব্রেরি আছে - অন্যথায় আমার $ দৃশ্যটি উপরে বর্ণিত কাজ করবে না। আমার প্রশ্নটি ছিল কেন j কাজ করে তবে কৌনিক.এলিমেন্টটি কেন কাজ করে না - যদিও পুরো jQuery উপলভ্য।

— ইরশিয়ান

আপনি কি কৌনিক.জ এর আগে বা পরে jQuery অন্তর্ভুক্ত করছেন? এটি কৌণিক আগে অন্তর্ভুক্ত করা উচিত । আইডি দিয়ে নির্বাচকরা কি : সঙ্গে jQuery এর প্রাপ্তিসাধ্য কাজ jsbin.com/ohumiy/1/edit

— garst

তারা অন্য একটি নির্দেশিকাতে কাজ করছে (অর্থাত্ আইডি দ্বারা কিছু অ্যাক্সেস করার জন্য কৌণিক.এলিমেন্ট)। সমস্যাটি মনে হয় যে এই নিয়ন্ত্রণটি সেই উপাদানটির সাথে নিজেকে যুক্ত করে কাজ করে, যদিও একই jQuery সমতুল্য কেন সরাসরি কাজ করা উচিত তা আমি বুঝতে পারি না। জিকুয়ারি ব্যবহার করে সরাসরি আমার নির্দেশিকাটি একটি ক্লোজিং ট্যাগ রয়েছে - স্ব-সমাপনী ট্যাগ কাজ করে না (কোনও ত্রুটি কেবল একটি ফাঁকা স্ক্রিন নয়) যা আমাকে নিয়ন্ত্রণ সন্দেহ করে।

— ইরাসিয়ান

আমার ২ য় পয়েন্টে ভিউ-ভ্যালু জাতীয় কিছু রয়েছে যা কোনও উপাদানটির বিষয়বস্তু পুনরুদ্ধার করতে ব্যবহৃত হতে পারে তবে ইনপুট টাইপ = সংখ্যার ক্ষেত্রে যেখানে ব্যবহারকারীর ইনপুট থাকে "-" এটি খালি is অ্যাংুলার পদক্ষেপ নেওয়ার আগে উপাদানগুলির জন্য element কাঁচা ইনপুটভ্যালিউর মতো একটি উপাদান চাই element

— ইরাসিয়ান

Answer 3

var target = document.getElementById('appBusyIndicator');

সমান

var target = $document[0].getElementById('appBusyIndicator');

Comments

আপনার নির্ভরতা সুস্পষ্ট এবং বিদ্রূপ হতে পারে তা নিশ্চিত করার জন্য দ্বিতীয় উদাহরণটি ব্যবহার করা আরও ভাল, তাই না?

— লুক

এটি হওয়া উচিত, তবে আমি অনুমান করি কৌণিক 2+ এ আমরা টাইপস্ক্রিপ্ট বৈশিষ্ট্যগুলিতে আরও বেশি নির্ভর করি। এই বিষয়গুলি নিয়ে আর চিন্তা করতে হবে না :)

— দাসুন

Answer 4

কৌণিক ব্যবহারের এটি সঠিক উপায় বলে আমি মনে করি না। যদি কোনও কাঠামোর পদ্ধতি বিদ্যমান না থাকে তবে এটি তৈরি করবেন না! এর অর্থ ফ্রেমওয়ার্ক (এখানে কৌণিক) এইভাবে কাজ করে না।

কৌণিক সাহায্যে আপনি ডিওএম কে এই জাতীয় (জ্যাকোরি উপায়) ম্যানিপুলেট করবেন না, তবে কৌণিক সাহায্যকারী যেমন ব্যবহার করুন

<div ng-show="isLoading" class="loader"></div>

অথবা এতে সম্পূর্ণ নিয়ন্ত্রণ রাখতে নিজের নিজস্ব নির্দেশিকা (আপনার নিজস্ব ডোম উপাদান) তৈরি করুন।

বিটিডাব্লু , আপনি এখানে দেখতে পারেন http://caniuse.com/#search=queryselector ক্যোয়ারী নির্বাচনকারী ভাল সমর্থিত এবং তাই নিরাপদে ব্যবহার করা যেতে পারে।

Comments

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

— স্টিফেন চুং

Answer 5

যদি কেউ কুসুম ব্যবহার করে, এটি ব্যবহার করার ক্ষেত্রে এটি একটি ত্রুটি দেখায় document.getElementById()এবং এটি ব্যবহারের পরামর্শ দেয় $document.getElementById()তবে এটি কার্যকর হয় না।

ব্যবহার -

$document[0].getElementById('id')

Comments

কৌনিক এখানে একটি অ্যারে ইনজেকশন করছে কেন?

— পিটার

Answer 6

আপনি $ দস্তাবেজটি ব্যবহার করে উপাদানগুলি অ্যাক্সেস করতে পারেন ($ নথিটি ইনজেকশনের প্রয়োজন)

var target = $document('#appBusyIndicator');
var target = $document('appBusyIndicator');

বা কৌণিক উপাদান সহ, নির্দিষ্ট উপাদানগুলি হিসাবে প্রবেশ করা যেতে পারে:

var targets = angular.element(document).find('div'); //array of all div
var targets = angular.element(document).find('p');
var target = angular.element(document).find('#appBusyIndicator');

Comments

সন্ধান করুন () - ট্যাগ নাম অনুসারে সীমাবদ্ধ

— আরজেভি

angular.element (ডকুমেন্ট) .find ( 'someClass।'); পুরোপুরি ঠিক আছে।

— নিশান্ত বরানওয়াল

Answer 7

আপনার নিয়ামকটিতে আপনার $ দস্তাবেজটি ইনজেকশন করা উচিত, এবং এটি মূল দস্তাবেজ অবজেক্টের পরিবর্তে ব্যবহার করা উচিত।

var myElement = angular.element($document[0].querySelector('#MyID'))

আপনার যদি jquery শৈলীর উপাদান মোড়ানোর প্রয়োজন না হয়, $ ডকুমেন্ট [0]। ক্যুরিয়ার নির্বাচনকারী ('# মাইআইডি') আপনাকে ডিওএম অবজেক্ট দেবে।

Comments

আপনি পাশাপাশি অ্যাঙ্গুলার $ ডকুমেন্ট পরিষেবা ওভারহেড ব্যবহারের পরিবর্তে সরাসরি উইন্ডো.ডমামেন্টের রেফারেন্স দিতে পারেন।

— ম্যাটবি

অবশ্যই আপনি $ ডকুমেন্ট উপহাস আপনার unittest সম্পর্কে চিন্তা করবেন না করতে পারেন

— Adamy

আমার কাছে পরিষ্কার নয়: আমি এই সতর্কতাটি পেয়েছি: আপনার ডিফল্ট ডকুমেন্ট অবজেক্টের পরিবর্তে $ ডকুমেন্ট পরিষেবাটি ব্যবহার করা উচিত, তবে এর অর্থ কী? এটি সম্পর্কে কোন ডক্স? ধন্যবাদ!

— রিয়েলট

@ রিয়েলোট আপনি নিজের জাভাস্ক্রিপ্টের যে কোনও জায়গা থেকে এইচটিএমএল ডিওএম ডকুমেন্ট অবজেক্টে অ্যাক্সেস করতে পারবেন না। w3schools.com/jsref/dom_obj_docament.asp

— অ্যাডামি

Answer 8

এটি আমার পক্ষে ভাল কাজ করেছে।

angular.forEach(element.find('div'), function(node)
{
  if(node.id == 'someid'){
    //do something
  }
  if(node.className == 'someclass'){
    //do something
  }
});

Comments

উপাদান অপরিবর্তিত? অ্যাঙ্গুলার.ইলেটমেন্ট.ফাইন্ড আমার জন্য জিকিউরি ছাড়াই চেষ্টা করে ফাংশন নয়।

— অবতরণ করেছে

দয়া করে এটি করবেন না। অন্যান্য উদাহরণগুলির মধ্যে একটি ব্যবহার করুন। এটি কোনও হ্যাশ টেবিল লুকিং অপ্টিমাইজেশন ব্যবহার করে না।

— ম্যাটবি

Answer 9

কায়সারের উত্তরে উন্নতি:

var myEl = $document.find('#some-id');

$documentআপনার নির্দেশের মধ্যে ইনজেকশন ভুলবেন না

Comments

এলিমেন্ট.ফাইন্ডের কৌণিক ডকুমেন্টেশনে যেমন উল্লেখ করা হয়েছে : find() - Limited to lookups by tag nameএটি আইডিতে কাজ করে না। এছাড়াও আপনার একটি অতিরিক্ত বন্ধ রয়েছে )।

— পাত

Answer 10

সম্ভবত আমি এখানে অনেক দেরি করেছি তবে এটি কাজ করবে:

var target = angular.element(appBusyIndicator);

লক্ষ্য করুন, কোনও নেই appBusyIndicator, এটি প্লেইন আইডি মান।

পর্দার আড়ালে কী ঘটছে: (ধরে নিলাম এটি একটি ডিভের উপর প্রয়োগ করা হয়েছে) (কৌনিক.জেএস লাইন নং থেকে নেওয়া: 2769 এর পরে ...)

/////////////////////////////////////////////
function JQLite(element) {     //element = div#appBusyIndicator
  if (element instanceof JQLite) {
    return element;
  }

  var argIsString;

  if (isString(element)) {
    element = trim(element);
    argIsString = true;
  }
  if (!(this instanceof JQLite)) {
    if (argIsString && element.charAt(0) != '<') {
      throw jqLiteMinErr('nosel', 'Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element');
    }
    return new JQLite(element);
  }

ডিফল্টরূপে পৃষ্ঠাটিতে কোনও jQuery না থাকলে jqLite ব্যবহার করা হবে। যুক্তিটি অভ্যন্তরীণভাবে একটি আইডি হিসাবে বোঝা যায় এবং সংশ্লিষ্ট jQuery অবজেক্টটি ফিরে আসে।

Comments

আমি এখনই এঙ্গুলার 1.5.8 দিয়ে চেষ্টা করেছি। একটি সরল আইডি খালি ফলাফল দেয়। angular.element("#myId")ভাল কাজ করে.

— গোশা ইউ

আপনার পৃষ্ঠায় jQuery থাকতে পারে?

— বিশাল আনন্দ