কৌণিক জেএস ও বনাম @ এবং = এর মধ্যে পার্থক্য কী


238

আমি AngularJS এ খুব নতুন। যে কেউ আমাকে এই AngularJS অপারেটরগুলির মধ্যে পার্থক্য ব্যাখ্যা করতে পারে: &, @ and =যখন উপযুক্ত উদাহরণ দিয়ে সুযোগকে বিচ্ছিন্ন করে।


উত্তর:


375

@নির্দেশকের অ্যাট্রিবিউটে স্কোলে প্রেরণ করার জন্য নির্দেশকের বৈশিষ্ট্যের উপর নির্ধারিত একটি মানকে অনুমতি দেয়। মানটি একটি সাধারণ স্ট্রিং মান ( myattr="hello") হতে পারে বা এটি এম্বেডড এক্সপ্রেশন ( myattr="my_{{helloText}}") সহ একটি AngularJS ইন্টারপোলটেড স্ট্রিং হতে পারে । সন্তানের দিকনির্দেশনায় অভিভাবকত্ব থেকে এটি "একমুখী" যোগাযোগ হিসাবে ভাবেন। জন লিন্ডকুইস্টের এগুলির প্রতিটি ব্যাখ্যা করার জন্য একটি সিরিজ শর্ট স্ক্রিনকাস্ট রয়েছে। @ এর স্ক্রিনকাস্টটি এখানে রয়েছে: https://egghead.io/lessons/angularjs-islate-scope-attribute-binding

&দিকনির্দেশকের বিচ্ছিন্ন সুযোগটি বৈশিষ্ট্যে সংজ্ঞায়িত অভিব্যক্তিতে মূল্যায়নের জন্য প্যারেন্ট স্কোপগুলিতে মানগুলি পাস করার অনুমতি দেয়। মনে রাখবেন যে দিকনির্দেশক বৈশিষ্ট্যটি স্পষ্টতই একটি অভিব্যক্তি এবং ডাবল কোঁকড়ানো ব্রেস এক্সপ্রেশন সিনট্যাক্স ব্যবহার করে না। এটি পাঠ্যতে ব্যাখ্যা করা আরও কঠিন। স্ক্রীনকাস্ট চালু এবং এখানে রয়েছে: https://egghead.io/lessons/angularjs-islate-scope- এক্সপ্রেশন- বাইন্ডিং

=নির্দেশকের বিচ্ছিন্ন সুযোগ এবং পিতামাতার সুযোগের মধ্যে দ্বি-মুখী আবদ্ধ অভিব্যক্তি সেট আপ করে। সন্তানের সুযোগে পরিবর্তনগুলি পিতামাতাকে এবং এর বিপরীতে প্রচার করা হয়। @ এবং & এর সংমিশ্রণ হিসাবে = ভাবেন। স্ক্রীনকাস্টটি এখানে রয়েছে: https://egghead.io/lessons/angularjs-islate-scope-two-way-binding

এবং অবশেষে এখানে একটি স্ক্রিনকাস্ট যা তিনটিই একক দৃশ্যে একসাথে ব্যবহৃত দেখায়: https://egghead.io/lessons/angularjs-islate-scope-review



1
কলআউট করার জন্য ধন্যবাদ, আমি সঠিক উত্তরগুলি দিয়ে আমার উত্তরটি আপডেট করেছি।
ক্লিফ.মায়ার্স

43
এটি লজ্জার বিষয় যে, উপরে রেট দেওয়া উত্তরগুলি পে ওয়ালের পিছনে থাকা ভিডিওগুলির সাথে লিঙ্ক করে যখন সম্ভবত সেখানে একই পরিমাণ তথ্য রয়েছে free
বেনক্রি

অনেকগুলি ভিডিও রয়েছে যা ডিমের মাথায় নিখরচায় সরবরাহ করা হয় :)
ভটসাল

7
প্রদত্ত সামগ্রীর জন্য বিয়োগ এক।
আরেল সাপির

109

আমি জাভাস্ক্রিপ্ট প্রোটোটাইপ উত্তরাধিকারের দৃষ্টিকোণ থেকে ধারণাগুলি ব্যাখ্যা করতে চাই। আশা করি বুঝতে সাহায্য করুন।

নির্দেশনার সুযোগটি নির্ধারণ করার জন্য তিনটি বিকল্প রয়েছে:

  1. scope: false: কৌণিক ডিফল্ট। দিকনির্দেশনার সুযোগটি তার পিতামাতাদের স্কোপগুলির মধ্যে একটাই (parentScope ) একটি।
  2. scope: true: কৌণিক এই নির্দেশের জন্য সুযোগ তৈরি করে। সুযোগটি মূলত উত্তরাধিকার সূত্রে প্রাপ্ত parentScope
  3. scope: {...}: বিচ্ছিন্ন সুযোগটি নীচে ব্যাখ্যা করা হয়েছে।

নির্দিষ্ট scope: {...}করে একটি isolatedScope। একটি isolatedScopeথেকে উত্তরাধিকারী বৈশিষ্ট্য নয় parentScope, যদিও isolatedScope.$parent === parentScope। এটি এর মাধ্যমে সংজ্ঞায়িত করা হয়:

app.directive("myDirective", function() {
    return {
        scope: {
            ... // defining scope means that 'no inheritance from parent'.
        },
    }
})

isolatedScopeএর সরাসরি অ্যাক্সেস নেই parentScope। তবে কখনও কখনও নির্দেশকের সাথে যোগাযোগ করা প্রয়োজন parentScope। তারা যোগাযোগ করে @, =এবং &প্রতীক ব্যবহার সম্পর্কিত বিষয় @, =এবং &ব্যবহারের পরিস্থিতি সম্পর্কে কথা বলছেisolatedScope

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

এখানে একটি মৌলিক নির্দেশনা রয়েছে: http://jsfiddle.net/7t984sf9/5/ । উদাহরণস্বরূপ একটি চিত্র:

এখানে চিত্র বর্ণনা লিখুন

@: একমুখী বাঁধাই

@কেবল থেকে সম্পত্তি পাসের parentScopeজন্য isolatedScope। এটি বলা হয় one-way binding, যার অর্থ আপনি parentScopeবৈশিষ্ট্যের মানটি পরিবর্তন করতে পারবেন না । আপনি যদি জাভাস্ক্রিপ্ট উত্তরাধিকারের সাথে পরিচিত হন তবে আপনি সহজেই এই দুটি পরিস্থিতি বুঝতে পারবেন:

  • যদি বাইন্ডিং সম্পত্তিটি আদিম ধরণের হয়, যেমন interpolatedPropউদাহরণের মতো: আপনি সংশোধন করতে পারেন interpolatedProp, তবে parentProp1পরিবর্তিত হবে না। যাইহোক, যদি আপনি এর মান পরিবর্তন parentProp1, interpolatedPropনতুন মান সঙ্গে ওভাররাইট হবে (যখন কৌণিক $ হজম)।

  • যদি বাইন্ডিং সম্পত্তিটি কিছু অবজেক্ট হয়, যেমন parentObj: যেহেতু পাশ করা হয়েছে isolatedScopeতা একটি রেফারেন্স, মানটি পরিবর্তন করা এই ত্রুটিটিকে ট্রিগার করবে:

    TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

=: দ্বিমুখী বাঁধাই

=বলা হয় two-way binding, যার অর্থ কোনও পরিবর্তনই childScopeএর মান আপডেট করে parentScopeএবং বিপরীতে। এই নিয়ম আদিম এবং বস্তু উভয়ের জন্যই কাজ করে। তোমাদের মধ্যে বাঁধাই টাইপ পরিবর্তন করেন তাহলে parentObjহতে =, আপনি যে আপনি মান পরিবর্তন করতে পারেন পাবেন parentObj.x। একটি সাধারণ উদাহরণ হল ngModel

&: ফাংশন বাঁধাই

&নির্দেশকে কিছু parentScopeফাংশন কল করতে এবং নির্দেশ থেকে কিছু মান পাস করার অনুমতি দেয় । উদাহরণস্বরূপ, জেএসফিডাল চেক করুন: এবং নির্দেশের সুযোগে

নির্দেশে একটি ক্লিকযোগ্য টেমপ্লেট সংজ্ঞায়িত করুন:

<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">

এবং নির্দেশনাটি ব্যবহার করুন:

<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>

চলকটি valueFromDirectiveনির্দেশিকা থেকে পিতামাতার নিয়ামকের মাধ্যমে প্রেরণ করা হয়{valueFromDirective: ...

তথ্যসূত্র: স্কোপগুলি বোঝা


ডিফল্টরূপে, দিকনির্দেশকগুলি ভাগ করা সুযোগ ব্যবহার করে। যদি নির্দেশকের 'সুযোগ: সত্য' থাকে তবে এটি উত্তরাধিকার সূত্রে প্রাপ্ত সুযোগটি ব্যবহার করে, এতে শিশু পিতামাতাদের বৈশিষ্ট্য দেখতে পারে তবে পিতামাতারা সন্তানের অভ্যন্তরীণ বৈশিষ্ট্যগুলি দেখতে পারে না।
YuMei

1
AngularJS - বিচ্ছিন্ন Scopes - @ বনাম = বনাম & ---------- ব্যাখ্যা সহ সংক্ষিপ্ত উদাহরণ নীচের লিঙ্কে পাওয়া যায়: কোডফায়াচ.আঙ্গুলারজ
প্রশান্ত

24

আমার কোলাহল নয়, তবে http://jsfiddle.net/maxisam/QrCXh/ পার্থক্য দেখায়। মূল অংশটি হ'ল:

           scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        

17

@ : একমুখী বাঁধাই

= : দ্বিমুখী বাইন্ডিং

& : ফাংশন বাঁধাই


5
@ এর কাছে একটি গুরুত্বপূর্ণ
সতর্কতা

@ শাওসন: তাহলে কীভাবে ওয়ান-ওয়ে নন-স্ট্রিং (যেমন ইনট বা বুল) বাঁধবেন?
বা ম্যাপার

যদি আপনার হৃদয় এটির উপর নির্ভর করে তবে আপনি @ থেকে মানটি নিতে পারেন এবং নিক্ষেপটি কোনও অন্তর্ / বুলের কাছে যেতে পারে? অন্যথায় আমি কেবল = বা <
শাওসন

7

AngularJS - বিচ্ছিন্ন Scopes - @ বনাম = বনাম &


ব্যাখ্যা সহ সংক্ষিপ্ত উদাহরণ নীচের লিঙ্কে উপলব্ধ:

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ - এক উপায় বাঁধাই

নির্দেশে:

scope : { nameValue : "@name" }

দেখুন:

<my-widget name="{{nameFromParentScope}}"></my-widget>

= - দুটি উপায় বাঁধাই

নির্দেশে:

scope : { nameValue : "=name" },
link : function(scope) {
  scope.name = "Changing the value here will get reflected in parent scope value";
}

দেখুন:

<my-widget name="{{nameFromParentScope}}"></my-widget>

& - ফাংশন কল

নির্দেশে:

scope : { nameChange : "&" }
link : function(scope) {
  scope.nameChange({newName:"NameFromIsolaltedScope"});
}

দেখুন:

<my-widget nameChange="onNameChange(newName)"></my-widget>

5

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

আছে: একটা চমৎকার ব্লগ পোষ্টের এই এই ব্যাখ্যা এর http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes

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