AngularJS এর নির্দেশক সুযোগে '@' এবং '=' এর মধ্যে পার্থক্য কী?




angularjs-directive angularjs-scope (12)

কেন আমাকে '{{title}} "ব্যবহার করতে হবে' @ 'এবং' title 'দিয়ে' = 'দিয়ে?

@ DOM বৈশিষ্ট্যটির মূল্যায়িত মূল্যের জন্য স্থানীয় / নির্দেশিকা স্কোপ সম্পত্তিটি বাঁধে। আপনি যদি title=title1 বা title="title1" , তবে "শিরোনাম" বৈশিষ্ট্যটির মান কেবল স্ট্রিং title1title="{{title}}" , "শিরোনাম" শিরোনামের মানটি {{title}} এর ইন্টারপোলেড মানটি হল {{title}} , সুতরাং স্ট্রিংটি যেকোনো প্যারেন্ট স্কোপ সম্পত্তি "শিরোনাম" সেট করা হবে। যেহেতু গুণমানের মানগুলি সর্বদা স্ট্রিং থাকে, তাই যখন আপনি @ ব্যবহার করার সময় নির্দেশকের সুযোগে এই সম্পত্তিটির জন্য স্ট্রিং মানটি সর্বদা শেষ করবেন।

= একটি অভিভাবক সুযোগ সম্পত্তি একটি স্থানীয় / নির্দেশিকা সুযোগ সম্পত্তি binds। সুতরাং = , আপনি পিতামাতার মডেল / সুযোগ সম্পত্তি নামটি DOM বৈশিষ্ট্যের মান হিসাবে ব্যবহার করুন। আপনি {{}} s = দিয়ে ব্যবহার করতে পারবেন না।

@ দিয়ে, আপনি title="{{title}} and then some" মত কিছু করতে পারেন title="{{title}} and then some" - {{শিরোনাম}} বিভক্ত হয়, তারপরে স্ট্রিং "এবং তাদের কিছু" এর সাথে সংযোজিত হয়। চূড়ান্ত সংযোজিত স্ট্রিং স্থানীয় / নির্দেশিকা সুযোগ সম্পত্তি পায় কি। (আপনি এটি দিয়ে করতে পারবেন না, শুধুমাত্র @ ।)

@ এর সাথে , আপনি আপনার লিঙ্ক (ing) ফাংশনে মানটি ব্যবহার করতে হলে attr.$observe('title', function(value) { ... }) ব্যবহার করতে হবে। উদাহরণস্বরূপ, if(scope.title == "...") আপনার প্রত্যাশা করে কাজ করবে না। মনে রাখবেন যে আপনি শুধুমাত্র এই বৈশিষ্ট্যটি asynchronously অ্যাক্সেস করতে পারেন। যদি আপনি শুধুমাত্র টেমপ্লেটে মানটি ব্যবহার করেন তবে আপনি $ observation () ব্যবহার করতে হবে না। যেমন, template: '<div>{{title}}</div>'

= দিয়ে , আপনি $ পর্যবেক্ষণ ব্যবহার করতে হবে না।

আমি একটি বৈশিষ্ট্য সঙ্গে আমার উপাদান সাজাইয়া ছাড়া, সরাসরি পিতামাতার সুযোগ অ্যাক্সেস করতে পারি?

হ্যাঁ, কিন্তু যদি আপনি একটি বিচ্ছিন্ন সুযোগ ব্যবহার না শুধুমাত্র। আপনার নির্দেশিকা থেকে এই লাইন সরান

scope: { ... }

এবং তারপর আপনার নির্দেশিকা একটি নতুন সুযোগ তৈরি করবে না। এটি পিতামাতার সুযোগ ব্যবহার করবে। আপনি সরাসরি পিতামাতা সুযোগ বৈশিষ্ট্য সব অ্যাক্সেস করতে পারেন।

ডকুমেন্টেশন বলছে "প্রায়শই এক্সপ্রেশন এবং অভিভাবক সুযোগের মাধ্যমে বিচ্ছিন্ন সুযোগ থেকে ডেটা পাস করতে ইচ্ছাজনক হয়", তবে এটি দ্বিধাহীনভাবে বাঁধাইয়ের সাথেও সূক্ষ্ম কাজ বলে মনে হয়। অভিব্যক্তি রুট ভাল হতে হবে কেন?

হ্যাঁ, ডাইরেক্টিকাল বাইন্ডিং স্থানীয় / নির্দেশিকা সুযোগ এবং পিতামাতার সুযোগটি তথ্য ভাগ করার অনুমতি দেয়। "এক্সপ্রেশন বাইন্ডিং" ডায়মন্ড বৈশিষ্ট্যের দ্বারা সংজ্ঞায়িত অভিব্যক্তি (বা ফাংশন) কল করার নির্দেশ দেয় - এবং আপনি অভিব্যক্তি বা ফাংশনে আর্গুমেন্ট হিসাবে ডেটাও পাস করতে পারেন। সুতরাং, যদি আপনি পিতামাতার সাথে ডেটা ভাগ করার প্রয়োজন হয় না - আপনি কেবল পিতামাতার সুযোগে সংজ্ঞায়িত একটি ফাংশন কল করতে চান - আপনি সিনট্যাক্স ব্যবহার করতে পারেন।

আরো দেখুন

আমি সাবধানে বিষয় Ang AngJJ ডকুমেন্টেশন পড়েছি, এবং তারপর একটি নির্দেশ সঙ্গে প্রায় fiddled। এখানে fiddle

এবং এখানে কিছু প্রাসঙ্গিক স্নিপেট আছে:

  • এইচটিএমএল থেকে:

    <pane bi-title="title" title="{{title}}">{{text}}</pane>
  • প্যানেল নির্দেশিকা থেকে:

    scope: { biTitle: '=', title: '@', bar: '=' },

এমন কিছু জিনিস আছে যা আমি পাই না:

  • কেন আমাকে "{{title}}" করতে হবে '@' এবং "title" দিয়ে '=' ?
  • আমি একটি বৈশিষ্ট্য সঙ্গে আমার উপাদান সাজাইয়া ছাড়া, সরাসরি পিতামাতার সুযোগ অ্যাক্সেস করতে পারি?
  • ডকুমেন্টেশন বলছে "প্রায়শই এক্সপ্রেশন এবং অভিভাবক সুযোগের মাধ্যমে বিচ্ছিন্ন সুযোগ থেকে ডেটা পাস করতে ইচ্ছাজনক হয়" , তবে এটি দ্বিধাহীনভাবে বাঁধাইয়ের সাথেও সূক্ষ্ম কাজ বলে মনে হয়। অভিব্যক্তি রুট ভাল হতে হবে কেন?

আমি আরেকটি উষ্ণতা খুঁজে পেয়েছি যা এক্সপ্রেশন সমাধানটিও দেখায়: http://jsfiddle.net/maxisam/QrCXh/


কেন আমাকে '{{title}} "ব্যবহার করতে হবে' @ 'এবং' title 'দিয়ে' = 'দিয়ে?

যখন আপনি {{title}} ব্যবহার করেন, তখন শুধুমাত্র অভিভাবক সুযোগের মান নির্দেশক দর্শন এবং মূল্যায়ন করা হবে। এটি একরকম সীমাবদ্ধ, যার অর্থ হল পরিবর্তনটি পিতামাতার সুযোগে প্রতিফলিত হবে না। যখন আপনি পিতামাতার স্কোলে শিশু নির্দেশে করা পরিবর্তনগুলি প্রতিফলিত করতে চান তখন আপনি '=' ব্যবহার করতে পারেন। এই দুটি উপায়।

আমি একটি বৈশিষ্ট্য সঙ্গে আমার উপাদান সাজাইয়া ছাড়া, সরাসরি পিতামাতার সুযোগ অ্যাক্সেস করতে পারি?

যখন নির্দেশিকাতে এটির সুযোগটি থাকে (সুযোগ: {}), তখন আপনি সরাসরি পিতামাতার সুযোগটি অ্যাক্সেস করতে পারবেন না। তবে এখনও সুযোগের মাধ্যমে এটি অ্যাক্সেস করা সম্ভব। $ অভিভাবক ইত্যাদি। যদি আপনি নির্দেশিকা থেকে সুযোগটি সরাতে পারেন তবে এটি সরাসরি অ্যাক্সেস করা যেতে পারে।

ডকুমেন্টেশন বলছে "প্রায়শই এক্সপ্রেশন এবং অভিভাবক সুযোগের মাধ্যমে বিচ্ছিন্ন সুযোগ থেকে ডেটা পাস করতে ইচ্ছাজনক হয়", তবে এটি দ্বিধাহীনভাবে বাঁধাইয়ের সাথেও সূক্ষ্ম কাজ বলে মনে হয়। অভিব্যক্তি রুট ভাল হতে হবে কেন?

এটা প্রেক্ষাপটে উপর নির্ভর করে। আপনি যদি ডেটা সহ একটি অভিব্যক্তি বা ফাংশন কল করতে চান তবে আপনি এবং আপনি যদি তথ্য ভাগ করতে চান তবে আপনি '=' ব্যবহার করে বাইডিচনারাল পদ্ধতি ব্যবহার করতে পারেন।

নিচের লিঙ্কে নির্দেশিকাতে ডেটা পাস করার একাধিক উপায়গুলির মধ্যে পার্থক্যগুলি আপনি খুঁজে পেতে পারেন:

AngularJS - বিচ্ছিন্ন স্কোপ - @ বনাম = বনাম &

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


@ এ্যাট্রিবিউট স্ট্রিং বাইন্ডিং (এক উপায়) = দুই-উপায় মডেল বাঁধাই এবং কলব্যাক পদ্ধতি বাঁধাই


আপনি লাইভ উদাহরণ সঙ্গে এই কাজ কিভাবে আরো দেখতে চাই। http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
});
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        },
        template: "<div><p>{{title1}} {{title2}}</p></div>"
    };
});

আমি একটি ভাজা সব সম্ভব বিকল্প বাস্তবায়িত।

এটা সব অপশন সঙ্গে ডিল করে:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm


এখানে প্রচুর উত্তরের উত্তর আছে, তবে আমি আমার দৃষ্টিকোণটি @ , = , এবং বন্ধনীর মধ্যে পার্থক্য উপস্থাপন করতে চাই যা আমার জন্য কার্যকর প্রমাণিত হয়।

সমস্ত তিনটি বাইন্ডিং আপনার পিতামাতার সুযোগ থেকে উপাদানটির বৈশিষ্ট্যগুলির মাধ্যমে আপনার নির্দেশের বিচ্ছিন্ন সুযোগে ডেটা পাস করার উপায়।

  1. @ বাঁধাই স্ট্রিং পাস করার জন্য। এই স্ট্রিংগুলি {{}} ইন্টারপোলেড মানের জন্য এক্সপ্রেশনগুলিকে সমর্থন করে। উদাহরণ স্বরূপ: . Interpolated অভিব্যক্তি নির্দেশকের অভিভাবক সুযোগ বিরুদ্ধে মূল্যায়ন করা হয়।

  2. = বাঁধাই দ্বি-উপায় মডেল বাঁধাই জন্য। পিতামাতার সুযোগ মডেলটি নির্দেশক এর বিচ্ছিন্ন সুযোগ মডেল সাথে লিঙ্ক করা হয়। একটি মডেল পরিবর্তন অন্য প্রভাবিত করে, এবং বিপরীত।

  3. এবং আপনার নির্দেশের সুযোগে একটি পদ্ধতি পাস করার জন্য বাঁধাই যাতে এটি আপনার নির্দেশের মধ্যে বলা যেতে পারে। পদ্ধতি নির্দেশকের পিতামাতার সুযোগ পূর্ব-আবদ্ধ, এবং আর্গুমেন্ট সমর্থন করে। উদাহরণস্বরূপ যদি প্যারেন্ট স্কোপে হ্যালো (নাম) পদ্ধতিটি থাকে তবে আপনার নির্দেশের ভিতর থেকে পদ্ধতিটি কার্যকর করার জন্য আপনাকে $ scope.hello ({name: 'world'}) কল করতে হবে।

আমি একটি সংক্ষিপ্ত বর্ণনা দ্বারা সুযোগ বাইন্ডিং উল্লেখ করে এই পার্থক্য মনে রাখা সহজ যে খুঁজে পাওয়া যায় নি:

  • @ গুণমান স্ট্রিং বাঁধাই
  • = দুই-উপায় মডেল বাঁধাই
  • & কলব্যাক পদ্ধতি বাঁধাই

প্রতীকগুলি আপনার নির্দেশের প্রয়োগের কার্যকারিতার ভিতরে প্রতিনিধিত্ব করে এমনটি কী তা স্পষ্ট করে তোলে:

  • @ স্ট্রিং
  • = মডেল
  • & পদ্ধতি

দরকারীতা (আমার জন্য যাইহোক):

  1. =
  2. @
  3. &

তাদের মধ্যে প্রধান পার্থক্য ঠিক

@ Attribute string binding
= Two-way model binding
& Callback method binding

নির্দেশিকা মধ্যে সুযোগ যোগ করা যেতে পারে তিনটি উপায় আছে:

  1. অভিভাবক সুযোগ : এটি ডিফল্ট সুযোগ উত্তরাধিকার।

নির্দেশিকা এবং তার পিতা-মাতা (নিয়ন্ত্রক / নির্দেশিকা যা এটি মিথ্যা) সুযোগ একই। সুতরাং নির্দেশের ভিতরে স্কোপ ভেরিয়েবলগুলিতে যেকোন পরিবর্তনগুলি পিতামাতার নিয়ামক হিসাবেও প্রতিফলিত হয়। ডিফল্ট হিসাবে আপনি এটি নির্দিষ্ট করতে হবে না।

  1. শিশু সুযোগ : নির্দেশিকাটি একটি সন্তানের সুযোগ তৈরি করে যা অভিভাবকের সুযোগ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয় যদি আপনি নির্দেশের স্কোপ পরিবর্তনশীলকে সত্য হিসাবে উল্লেখ করেন।

এখানে, আপনি যদি নির্দেশের ভিতরে স্কোপ ভেরিয়েবলগুলি পরিবর্তন করেন তবে এটি পিতামাতার সুযোগে প্রতিফলিত হবে না, তবে যদি আপনি একটি সুযোগ পরিবর্তনশীলের সম্পত্তি পরিবর্তন করেন তবে এটি পিতামাতার স্কোপ পরিবর্তনশীল হিসাবে সংশোধন করা হয়, যা পিতামাতার সুযোগে প্রতিফলিত হয়। ।

উদাহরণ,

app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
        }
    };
});
  1. বিচ্ছিন্ন সুযোগ : আপনি যখন এমন নিয়ন্ত্রণ তৈরি করতে চান যেটি কন্ট্রোলার সুযোগ থেকে উত্তরাধিকারী হয় না তখন এটি ব্যবহার করা হয়।

যখন আপনি প্লাগইন তৈরি করছেন তখন এটি ঘটে তখন এটি কোনও HTML এ স্থাপন করা যেতে পারে এবং এটির পিতামাতার সুযোগ দ্বারা প্রভাবিত হয় না এমন নির্দেশিকা জেনেরিক করে তোলে।

এখন, যদি আপনি পিতামাতার সুযোগের সাথে কোনও ইন্টারঅ্যাকশন না চান তবে আপনি কেবল একটি ফাঁকা বস্তুর মতো সুযোগ নির্দিষ্ট করতে পারেন। মত,

scope: {} //this does not interact with the parent scope in any way

বেশিরভাগ ক্ষেত্রেই এটির ক্ষেত্রে আমাদের পিতামাতার সুযোগের সাথে কিছু মিথস্ক্রিয়া দরকার হয় না, তাই আমরা কিছু মান / পরিবর্তনের মধ্য দিয়ে যেতে চাই। এই কারণে, আমরা ব্যবহার করি:

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

@ এর মানে কন্ট্রোলার সুযোগ থেকে পরিবর্তনগুলি নির্দেশের সুযোগে প্রতিফলিত হবে তবে যদি আপনি নির্দেশের সুযোগের মান পরিবর্তন করেন তবে কন্ট্রোলার স্কোপ পরিবর্তনশীল প্রভাবিত হবে না।

@ সবসময় ম্যাপড বৈশিষ্ট্য একটি অভিব্যক্তি হতে আশা। এই অত্যন্ত গুরুত্বপূর্ণ; "@" উপসর্গ কাজ করার জন্য, আমাদের {{}} এর ভিতরে বৈশিষ্ট্য মান মোড়ানো প্রয়োজন।

= bidirectional সুতরাং যদি আপনি পরিবর্তনশীল দিক পরিবর্তনশীল পরিবর্তন, নিয়ামক সুযোগ পরিবর্তনশীল হিসাবে ভাল প্রভাবিত হয়

& নিয়ামক সুযোগ পদ্ধতি আবদ্ধ করা হয় যাতে প্রয়োজন হলে আমরা নির্দেশ থেকে এটি কল করতে পারেন

এখানে সুবিধা হল পরিবর্তনশীলের নাম নিয়ামক সুযোগ এবং নির্দেশক সুযোগের মধ্যে একই না।

উদাহরণস্বরূপ, নির্দেশকের সুযোগের একটি পরিবর্তনশীল "ডিয়ারভর" রয়েছে যা নিয়ামক সুযোগের পরিবর্তনশীল "contavar" এর সাথে সমন্বয় করে। এটি নির্দেশের জন্য অনেক ক্ষমতা এবং সাধারণকরণ দেয় কারণ এক নিয়ামক পরিবর্তনশীল v1 দিয়ে সিঙ্ক করতে পারে, একই নির্দেশনা ব্যবহার করে অন্য নিয়ামক ডাইভারকে ভেরিয়েবল v2 এর সাথে সিঙ্ক করতে চাইতে পারে।

নীচে ব্যবহারের উদাহরণ:

নির্দেশিকা এবং নিয়ামক হয়:

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    };
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        },
        link: function(element, scope, attrs){
           //do something like
           $scope.reverse(); 
          //calling the controllers function
        }
    };
});

এবং এইচটিএমএল (@ এবং = জন্য differnce নোট):

<div my-directive
  class="directive"
  name="{{name}}"
  reverse="reverseName()"
  color="color" >
</div>

এখানে একটি link যা এটি সুন্দরভাবে বর্ণনা করে।


= মানে দ্বি-নির্দেশক বাঁধাই, তাই একটি পরিবর্তনশীল অভিভাবক সুযোগের জন্য একটি রেফারেন্স। এর মানে হল, যখন আপনি নির্দেশিকা পরিবর্তনশীল পরিবর্তন, এটি পিতামাতার সুযোগ হিসাবে পরিবর্তিত হবে।

@ মানে পরিবর্তনশীল কপি করা হবে (ক্লোন) নির্দেশে।

যতদূর আমি জানি, <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane> কাজ করা উচিত। bi-title অভিভাবক সুযোগ পরিবর্তনশীল মান পাবে, যা নির্দেশে পরিবর্তন করা যেতে পারে।

যদি আপনি পিতামাতার সুযোগে বিভিন্ন পরিবর্তনগুলি পরিবর্তন করতে চান, তবে আপনি নির্দেশের মধ্যে থেকে (অথবা একটি পরিষেবা মাধ্যমে ডেটা পাস করে) পিতামাতার সুযোগে একটি ফাংশন কার্যকর করতে পারেন।


@ স্ট্রিং হিসাবে পেতে

  • এই যে কোন bindings তৈরি করে না। আপনি কেবল একটি স্ট্রিং হিসাবে পাস আপনি শব্দ পেয়ে থাকেন

= 2 উপায় বাঁধাই

  • নিয়ামক থেকে করা পরিবর্তন নির্দেশাবলী দ্বারা অনুষ্ঠিত রেফারেন্স প্রতিফলিত হবে, এবং বিপরীত

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

  • এই গটার ফাংশনটি কল করার পরে, ফলাফল বস্তু নিম্নরূপ আচরণ করে:
    • যদি একটি ফাংশন পাস হয়: ফাংশনটি যখন বলা হয় তখন প্যারেন্টে (কন্ট্রোলার) বন্ধ করা হয়
    • যদি একটি নন-ফাংশন পাস করা হয়: কেবল কোনও বাইন্ডিংয়ের বস্তুর একটি স্থানীয় অনুলিপি পান


এই বেদনা তারা কাজ কিভাবে প্রদর্শন করা উচিত । সুযোগ সহকারে ফাংশনগুলিতে বিশেষ মনোযোগ দিন get... আমি যা বলছি তার অর্থ আরো ভালভাবে বোঝার জন্য &


= পথ 2-উপায় বাঁধাই , যা আপনাকে আপনার নির্দেশিকা ভিতরে লাইভ পরিবর্তন করতে দেয়। যখন কেউ নির্দেশের বাইরে যে পরিবর্তনশীল পরিবর্তন করে, তখন আপনার নির্দেশের ভিতরে আপনার সেই ডেটা পরিবর্তিত হবে, তবে @ রাস্তাটি দুই-দিকের বাঁধাই নয় । এটা টেক্সট মত কাজ করে। আপনি একবার আবদ্ধ, এবং আপনি শুধুমাত্র তার মান হবে।

এটি আরও পরিষ্কারভাবে পেতে, আপনি এই দুর্দান্ত নিবন্ধটি ব্যবহার করতে পারেন:

AngularJS নির্দেশিকা সুযোগ '@' এবং '='


@ স্থানীয় সুযোগ সম্পত্তি নির্দেশের বাইরে সংজ্ঞায়িত স্ট্রিং মান অ্যাক্সেস করতে ব্যবহার করা হয়।

= এমন ক্ষেত্রে যেখানে বাইরের সুযোগ এবং নির্দেশের বিচ্ছিন্নতার সুযোগের মধ্যে দুই-দিকের বাঁধ নির্মাণ করতে হবে, আপনি = চরিত্রটি ব্যবহার করতে পারেন।

& স্থানীয় সুযোগ সম্পত্তি নির্দেশিকা ভোক্তা একটি ফাংশন পাস করতে নির্দেশ দেয় যে নির্দেশিকা আহ্বান করতে পারেন।

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

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope





isolated-scope