AngularJS: $ পর্যবেক্ষণ এবং $ ঘড়ির পদ্ধতির মধ্যে পার্থক্য


378

আমি জানি যে উভয়ই Watchersএবং অ্যাঙ্গুলারজেএস- Observersতে $scopeপরিবর্তনের সাথে সাথেই গণনা করা হয় । দুজনের মধ্যে ঠিক কী পার্থক্য তা বুঝতে পারি নি।

আমার প্রাথমিক বোঝাপড়াটি হ'ল Observersকৌণিক অভিব্যক্তিগুলির জন্য গণনা করা হয় যা এইচটিএমএল দিকের শর্ত যেখানে ফাংশন Watchersকার্যকর হওয়ার সময় $scope.$watch()কার্যকর হয়। আমি কি ঠিক মতো ভাবছি?


1
আপনার সম্পাদনা সহায়ক এবং কিছুটা বিদ্বেষমূলক নয়। অন্যদের প্রকৃত সহায়তার জন্য এখানে আসার বিষয়ে দয়া করে বিবেচনা করুন।
smalone

@ সামোন পরিবর্তন হয়েছে। ধন্যবাদ এবং দুঃখিত!
অবিলাশ

👍 কোনও উদ্বেগ নেই। ঠিক করার জন্য ধন্যবাদ।
smalone

উত্তর:


608

$ পর্যবেক্ষণ () বৈশিষ্ট্য অবজেক্টেরএকটি পদ্ধতিএবং এর মতো এটি কেবল কোনও ডিওএম বৈশিষ্ট্যের মান পরিবর্তন পর্যবেক্ষণ / দেখার জন্য ব্যবহার করা যেতে পারে। এটি কেবল অভ্যন্তরীণ নির্দেশিকা ব্যবহৃত / বলা হয়। যখন আপনাকে কোনও ডিওএম বৈশিষ্ট্য পর্যবেক্ষণ / দেখার প্রয়োজন হবে যখন অন্তরঙ্গ (যেমন, {{}} 's) থাকে $ পর্যবেক্ষণ করুন।
যেমন,attr1="Name: {{name}}", তারপর নির্দেশ মধ্যে:attrs.$observe('attr1', ...)
(যদি আপনি চেষ্টা করেন তবেscope.$watch(attrs.attr1, ...)এটি কাজ করবে না কারণ -।}।} S - আপনি পাবেনundefined)) অন্য কিছুর জন্য ওয়াচ ব্যবহার করুন Use

$ ঘড়ি () আরও জটিল। এটি একটি "এক্সপ্রেশন" পর্যবেক্ষণ / পর্যবেক্ষণ করতে পারে, যেখানে প্রকাশটি কোনও ফাংশন বা স্ট্রিং হতে পারে। যদি অভিব্যক্তিটি একটি স্ট্রিং হয় তবে এটিকোনও ফাংশনে $ পার্স 'ডি (অর্থাত্ কৌণিক অভিব্যক্তি হিসাবে মূল্যায়ন) হয়। (এটি এই ফাংশন যা প্রতিটি ডাইজেস্ট চক্র বলা হয়)) স্ট্রিং এক্সপ্রেশনটিতে {{}} 'গুলি থাকতে পারে না। $ ঘড়ি স্কোপ অবজেক্টেরএকটি পদ্ধতি, সুতরাং যেখানেই আপনার কোনও স্কোপ অবজেক্টে অ্যাক্সেস রয়েছে সেখানেই এটি ব্যবহার / কল করা যায় in

  • একটি নিয়ামক - যে কোনও নিয়ামক - এটি এনজি-ভিউ, এনজি-কন্ট্রোলার বা কোনও নির্দেশিকা নিয়ামকের মাধ্যমে তৈরি করা হয়েছে
  • নির্দেশের সাথে একটি লিঙ্কিং ফাংশন, যেহেতু এটিরও একটি সুযোগে অ্যাক্সেস রয়েছে

স্ট্রিংগুলি কৌণিক অভিব্যক্তি হিসাবে মূল্যায়ন করা হয় বলে $ ঘড়িটি প্রায়শই ব্যবহার করা হয় যখন আপনি কোনও মডেল / স্কোপ সম্পত্তি দেখে / দেখতে চান। উদাহরণস্বরূপ, attr1="myModel.some_prop"তারপরে একটি নিয়ামক বা লিঙ্ক ফাংশনে: scope.$watch('myModel.some_prop', ...)বা scope.$watch(attrs.attr1, ...)(বা scope.$watch(attrs['attr1'], ...))।
(আপনি যদি চেষ্টা করেন attrs.$observe('attr1')তবে স্ট্রিংটি পাবেন myModel.some_propযা সম্ভবত আপনি চান না))

@ প্রিয়মস্কের উত্তরের মন্তব্যে আলোচিত হিসাবে, সমস্ত di পর্যবেক্ষণ এবং $ ঘড়ি প্রতিটি ডাইজেস্ট চক্র পরীক্ষা করা হয় ।

বিচ্ছিন্ন স্কোপগুলি সহ দিকনির্দেশগুলি আরও জটিল। যদি '@' সিনট্যাক্স ব্যবহার করা হয়, তবে আপনি p পর্যবেক্ষণ বা inter দেখতে পারেন এমন কোনও ডিওএম বৈশিষ্ট্য যা অন্তরঙ্গ (যেমন, {{}} 'গুলি) ধারণ করে। (এটি $ ঘড়ির সাথে কাজ করার কারণ হ'ল '@' সিনট্যাক্সটি আমাদের জন্য অন্তরঙ্গকরণ করে, তাই $ ঘড়িটি {{}} s 's ব্যতীত একটি স্ট্রিং দেখে)) কোনটি কখন ব্যবহার করা উচিত তা মনে রাখা সহজ করার জন্য, আমি ব্যবহার করার পরামর্শ দিই this এই ক্ষেত্রে জন্য পর্যবেক্ষণ।

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

<div d1 attr1="{{prop1}}-test" attr2="prop2" attr3="33" attr4="'a_string'"
        attr5="a_string" attr6="{{1+aNumber}}"></div>

সংযোগ ফাংশনটিতে $ পর্যবেক্ষণ এবং $ ঘড়ির মধ্যে পার্থক্যগুলি দেখতে কনসোল লগটি দেখুন। তারপরে লিঙ্কটি ক্লিক করুন এবং দেখুন হ্যান্ডলারের দ্বারা সম্পাদিত সম্পত্তি পরিবর্তনগুলি দ্বারা কোন $ পর্যবেক্ষণ এবং $ ঘড়িগুলি ট্রিগার করা হয়েছে তা দেখুন।

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

কখনও কখনও আপনার $ পর্যবেক্ষণ বা $ ঘড়ির প্রয়োজন হয় না। : যেমন, যদি আপনার অ্যাট্রিবিউট একটি সংখ্যা বা একটি বুলিয়ান (একটি স্ট্রিং নয়) রয়েছে, শুধু এটা একবার নির্ণয় attr1="22"তারপর, বলে, আপনার লিঙ্ক ফাংশন: var count = scope.$eval(attrs.attr1)। যদি এটি কেবল একটি ধ্রুব স্ট্রিং হয় - attr1="my string"- তবে কেবল attrs.attr1আপনার নির্দেশিকায় ব্যবহার করুন (al ইভাল () এর প্রয়োজন নেই)।

আরও দেখুন Vojta এর Google গ্রুপ পোস্টে $ ঘড়ি এক্সপ্রেশন সম্পর্কে।


13
দুর্দান্ত ব্যাখ্যা! +1
প্রাইমোসকে

4
দুর্দান্ত উত্তর! ng-src/ng-hrefতার attr.$observeপরিবর্তে কেন ব্যবহার করবেন আপনার ধারণা আছে scope.$watch?
Okm

4
অ্যাঙ্গুলারজেএস পোপের জন্য +1! প্রতিবার যখন আমি আমার সর্বশেষ কৌণিক সমস্যা সম্পর্কে কিছু তথ্যের জন্য স্ট্যাক অনুসন্ধান করি তখন আমি অনিবার্যভাবে @ মার্করজককের গৃহীত উত্তরটি পড়ে শেষ করি।
জিএফোলি 83

1
ধন্যবাদ এই অসাধারন পোস্টের জন্য. সুযোগ। al eval (আইটেম) সত্যিই সহায়ক। আইটেমটি যদি জসন স্ট্রিং হয় তবে এটি একটি জসন বস্তুতে রূপান্তর করে।
bnguyen82

5
@ টমাকিস্কুয়ার, @সিনট্যাক্স ব্যবহার করার সময় এগুলি বিনিময়যোগ্য । আমি বিশ্বাস করি যে কার্য সম্পাদনের কোনও পার্থক্য নেই (তবে আমি আসল উত্স কোডটির দিকে নজর দিইনি))
রাজকোক

25

যদি আমি আপনার প্রশ্নটি ঠিক বুঝতে পারি তবে আপনি যদি শ্রোতাদের কলব্যাকের সাথে নিবন্ধন করেন $watchবা এটি দিয়ে করেন তবে কী পার্থক্য তা আপনি জিজ্ঞাসা করছেন $observe

সাথে নিবন্ধিত কলব্যাক কার্যকর $watchকরা হয় যখন বরখাস্ত $digestকরা হয়।

সাথে নিবন্ধীকৃত কলব্যাক $observeবলা হয় যখন ইন্টারপোলেশন (যেমন attr="{{notJetInterpolated}}") সহ বৈশিষ্ট্যের মান পরিবর্তন হয় ।


দিকনির্দেশনার অভ্যন্তরে আপনি উভয়টিকে খুব অনুরূপ উপায়ে ব্যবহার করতে পারেন:

    attrs.$observe('attrYouWatch', function() {
         // body
    });

অথবা

    scope.$watch(attrs['attrYouWatch'], function() {
         // body
    });

3
প্রকৃতপক্ষে, যেহেতু প্রতিটি পরিবর্তন $digestপর্যায়ের প্রতিচ্ছবিতে প্রতিবিম্বিত হয় তাই $observeকলব্যাকটি ডাকা হবে বলে ধরে নেওয়া নিরাপদ $digest। এবং $watchকলব্যাক এছাড়াও কল করা হবে $digestকিন্তু যখনই মান পরিবর্তন করা হয়। আমি মনে করি তারা ঠিক একই কাজটি করেছে: "এক্সপ্রেশনটি দেখুন, কলব্যাকের কল্যাণে মান পরিবর্তন করুন"। মূলশব্দ পার্থক্যটি সম্ভবত বিকাশকারীকে বিভ্রান্ত না করার জন্য কেবল সিনট্যাকটিক চিনি।
উমুর কনটাসে

1
@ ফরেডলোড, আমি আপনার মন্তব্যের সাথে সম্পূর্ণ একমত .. সুন্দরভাবে লেখা!
PrimosK

@ ফরেডলোড ... দুর্দান্ত ব্যাখ্যার জন্য ধন্যবাদ Thanks যদি আমি সঠিকভাবে বুঝতে পারি তবে পর্যবেক্ষকরা কৌণিক এক্সপ্রেশনগুলির জন্য। আমি কি সঠিক?
অবিলাশ

@ প্রিয়মস্ক: আমার আগের মন্তব্যের জন্য আপনাকে যুক্ত করছি।
অবিলাশ

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

1

আমি মনে করি এটি বেশ সুস্পষ্ট:

  • $ নির্দেশাবলী সংযোগ ফাংশন পর্যবেক্ষণ ব্যবহৃত হয়।
  • $ ঘড়ির মানতে কোনও পরিবর্তন দেখার জন্য স্কোপটিতে ব্যবহৃত হয়।

মনে রাখবেন : উভয় ফাংশনে দুটি যুক্তি রয়েছে,

$observe/$watch(value : string, callback : function);
  • মান : সর্বদা দেখানো উপাদানগুলির একটি স্ট্রিং রেফারেন্স (কোনও স্কোপের ভেরিয়েবলের নাম বা প্রত্যক্ষ হওয়ার জন্য নির্দেশকের বৈশিষ্ট্যের নাম)
  • কলব্যাক : ফর্মটি কার্যকর করতে হবেfunction (oldValue, newValue)

আমি একটি তৈরি করেছি plunker, যাতে আপনি তাদের উভয় ব্যবহারের বিষয়ে উপলব্ধি পেতে পারেন। ছবিটি আরও সহজ করার জন্য আমি চামেলির উপমা ব্যবহার করেছি।


2
এটি এর ব্যবহার সম্পর্কে বেশ সুস্পষ্ট। তবে কেন প্রশ্ন ছিল। মার্ক এটি সুন্দরভাবে সংক্ষিপ্ত করেছেন।
অবিল্যাশ

3
আমি মনে করি যে প্যারামগুলি স্যুইচ করা হতে পারে - এটি নতুন ভ্যালু, তারপরে অ্যাট্রেয়ারদের কাছে ওল্ডভ্যালু পাস হতে পারে $ পর্যবেক্ষণ ()। । ।
ব্লাস্টার

0

$ ঘড়ির চেয়ে আলাদা কেন পালন করা হয়?

ওয়াচএক্সপ্রেসনটিকে মূল্যায়ন করা হয় এবং প্রতিটি ডাইজেস্ট () চক্রের আগের মানটির সাথে তুলনা করা হয়, যদি ওয়াচএক্সপ্রেসনের মানটিতে কোনও পরিবর্তন আসে, তবে ঘড়ির কার্যটি ডাকা হয়।

$ পর্যবেক্ষণ বিরতিযুক্ত মানগুলির জন্য সুনির্দিষ্ট। যদি কোনও নির্দেশকের বৈশিষ্ট্যের মানটি আন্তঃবিভক্ত হয়, যেমনdir-attr="{{ scopeVar }}" , ইন্টারপোল্টেড মান সেট করা থাকে তখন পর্যবেক্ষণ ফাংশনটি বলা হবে (এবং তাই $ ডাইজেস্ট ইতিমধ্যে নির্ধারিত আপডেটগুলি করা দরকার) তখন। মূলত অন্তরঙ্গকরণের জন্য ইতিমধ্যে একজন পর্যবেক্ষক রয়েছে এবং that ফাংশন পিগিব্যাকগুলি পর্যবেক্ষণ করুন।

Compile.js এ $ পর্যবেক্ষণ ও s সেট দেখুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.