AngularJS හි දිශානති විෂය පථයේ '@' සහ '=' අතර වෙනස කුමක්ද?

මම මාතෘකාව පිළිබඳ AngularJS ප්‍රලේඛනය ප්‍රවේශමෙන් කියවා, පසුව විධානයක් සමඟ විග්‍රහ කර ඇත්තෙමි . මෙන්න ෆෙඩෙල් .

අදාළ ස්නිපට කිහිපයක් මෙන්න:

• HTML වෙතින් :

  <pane bi-title="title" title="{{title}}">{{text}}</pane>

• කවුළු විධානයෙන්:

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

මට නොලැබෙන කරුණු කිහිපයක් තිබේ:

• ඇයි මම භාවිතා කිරීමට තියෙනවද "{{title}}"සමග '@'හා "title"සමග '='?
• මගේ අංගය ගුණාංගයකින් සරසා නොගෙන මට මව් විෂය පථයට කෙලින්ම පිවිසිය හැකිද?
• ප්‍රලේඛනය පවසන්නේ “බොහෝ විට හුදකලා විෂය පථයෙන් දත්ත ප්‍රකාශනය හරහා සහ මව් විෂය පථයට යැවීම යෝග්‍ය වේ” , නමුත් එය ද්විපාර්ශ්වික බන්ධනය සමඟ ද හොඳින් ක්‍රියාත්මක වන බව පෙනේ. ප්‍රකාශන මාර්ගය වඩා හොඳ වන්නේ ඇයි?

ප්‍රකාශන විසඳුම පෙන්වන තවත් ෆෙඩල් එකක් මට හමු විය: http://jsfiddle.net/maxisam/QrCXh/

මට " @ ' සමඟ" {{මාතෘකාව}} " සහ' = ' සමඟ" මාතෘකාව "භාවිතා කළ යුත්තේ ඇයි?

@ පොදුයි මේ සඳහා දේශීය / උපදෙස් විෂය පථය දේපල විශ්ලේෂණයට DOM නාලවල ඇගයීමට අගය . ඔබ භාවිතා කරන්නේ නම් title=title1හෝ title="title1", DOM ගුණාංගයේ "මාතෘකාව" හි අගය හුදෙක් නූල් title1වේ. ඔබ භාවිතා කරන්නේ නම් title="{{title}}", DOM ගුණාංගයේ "මාතෘකාව" හි අගය අන්තර්සම්බන්ධිත අගය වේ {{title}}, එබැවින් නූල් දැනට මව් විෂය පථයේ දේපල "මාතෘකාව" ලෙස සකසා ඇති ඕනෑම එකක් වනු ඇත. ලක්ෂණයට වටිනාකම් සෑම විටම නූල් බැවින්, ඔබ හැම විටම දක්වා එම නියෝගය ගේ විෂය පථය තුල මෙම දේපල වැලක් අගය භාවිතා කරන විට අවසන් වේ @ .

= දේශීය / නියෝග විෂය පථයේ දේපලක් මව් විෂය පථයට සම්බන්ධ කරයි. එබැවින් = සමඟ , ඔබ DOM ගුණාංගයේ වටිනාකම ලෙස මව් ආකෘතිය / විෂය පථයේ නම භාවිතා කරයි. ඔබට {{}}s සමඟ = භාවිතා කළ නොහැක .

@ සමඟ, ඔබට වැනි දේ කළ හැකිය title="{{title}} and then some"- {{මාතෘකාව} inter අන්තර් සම්බන්ධිත වේ, පසුව “සහ ඒවා සමහරක්” යන නූල එය සමඟ සංයුක්ත වේ. අවසාන සංයුක්ත නූල වන්නේ දේශීය / විධානයන් විෂය පථයට ලැබෙන දේය. (ඔබ සමග මෙම කරන්න බැහැ = පමණක් @ .)

සමග @ , ඔබ භාවිතා කිරීමට අවශ්ය වනු ඇත attr.$observe('title', function(value) { ... })ඔබ ඔබේ ලින්ක් (ඉන්ග්) යන ශ්රිතය එම වටිනාකම භාවිතා කිරීමට අවශ්ය නම්. උදා, if(scope.title == "...")ඔබ බලාපොරොත්තු වන පරිදි ක්‍රියා නොකරනු ඇත. මෙයින් අදහස් කරන්නේ ඔබට මෙම ගුණාංගයට අසමමුහුර්තව පමණක් ප්‍රවේශ විය හැකි බවයි. ඔබ අච්චුවක වටිනාකම පමණක් භාවිතා කරන්නේ නම් $ නිරීක්‍ෂණය () භාවිතා කිරීම අවශ්‍ය නොවේ. උදා , template: '<div>{{title}}</div>'.

= සමඟ , ඔබ භාවිතා කිරීම අවශ්‍ය නොවේ $ නිරීක්‍ෂණය.

මගේ අංගය ගුණාංගයකින් සරසා නොගෙන මට මව් විෂය පථයට කෙලින්ම පිවිසිය හැකිද?

ඔව්, නමුත් ඔබ හුදකලා විෂය පථයක් භාවිතා නොකරන්නේ නම් පමණි. ඔබේ නියෝගයෙන් මෙම රේඛාව ඉවත් කරන්න

scope: { ... }

එවිට ඔබේ නියෝගයෙන් නව විෂය පථයක් නිර්මාණය නොවේ. එය මව් විෂය පථය භාවිතා කරනු ඇත. එවිට ඔබට සියලු මව් විෂය පථ දේපල වෙත කෙලින්ම පිවිසිය හැකිය.

ප්‍රලේඛනය පවසන්නේ “බොහෝ විට හුදකලා විෂය පථයෙන් දත්ත ප්‍රකාශනයක් හරහා සහ මව් විෂය පථයට යැවීම යෝග්‍ය වේ”, නමුත් එය ද්විපාර්ශ්වික බන්ධනය සමඟ ද හොඳින් ක්‍රියාත්මක වන බව පෙනේ. ප්‍රකාශන මාර්ගය වඩා හොඳ වන්නේ ඇයි?

ඔව්, ද්විපාර්ශ්වික බන්ධනය මඟින් දේශීය / මෙහෙයවීමේ විෂය පථයට සහ මව් විෂය පථයට දත්ත බෙදා ගැනීමට ඉඩ ලබා දේ. "ප්‍රකාශන බන්ධනය" මඟින් DOM ගුණාංගයක් මගින් අර්ථ දක්වා ඇති ප්‍රකාශනයක් (හෝ ශ්‍රිතයක්) ඇමතීමට නියෝගයට ඉඩ දෙයි - තවද ඔබට ප්‍රකාශනයට හෝ ක්‍රියාකාරීත්වයට තර්ක ලෙස දත්ත යැවිය හැකිය. එබැවින්, ඔබට දෙමව්පියන් සමඟ දත්ත බෙදා ගැනීමට අවශ්‍ය නොවන්නේ නම් - ඔබට අවශ්‍ය වන්නේ මව් විෂය පථයේ අර්ථ දක්වා ඇති ශ්‍රිතයක් ඇමතීමට පමණි - ඔබට & සින්ටැක්ස් භාවිතා කළ හැකිය .

මෙයද බලන්න

• ලූකස්ගේ හුදකලා විෂය පථය බ්ලොග් සටහන (ආවරණ @, =, සහ)
• dnc253 හි පැහැදිලි කිරීම @ සහ =
• විෂය පථයන් පිළිබඳ මගේ බ්ලොග්-සමාන පිළිතුර - නියෝග අංශය (සාරාංශ කොටසට මඳක් පහළින්) හුදකලා විෂය පථයක් සහ එහි මව් විෂය පථය පිළිබඳ පින්තූරයක් ඇත - විධානය විෂය පථය එක් දේපලකට සහ = තවත් දේ සඳහා භාවිතා කරයි
• කෝණික ජේඑස් හි & vs @ සහ = අතර වෙනස කුමක්ද?

මහා පිළිතුරු ගොඩක් මෙතන තියෙනවා, නමුත් මම අතර ඇති වෙනස්කම් මත මගේ ඉදිරිදර්ශනය ඉදිරිපත් කිරීමට කැමති @, =හා &ඒ වෙනුවෙන් මට ඔප්පු බන්ධන.

බන්ධන තුනම මූලද්‍රව්‍යයේ ගුණාංග හරහා ඔබේ දෙමව්පියන්ගේ විෂය පථයෙන් ඔබේ නියෝගයේ හුදකලා විෂය පථයට දත්ත යැවීමේ ක්‍රම වේ:

1. ind බන්ධනය යනු නූල් පසු කිරීම සඳහා ය. මෙම නූල් {{}}අන්තර් සම්බන්ධිත අගයන් සඳහා ප්‍රකාශන සඳහා සහාය වේ. උදාහරණයක් වශයෙන්: . අන්තර් සම්බන්ධිත ප්‍රකාශනය නියෝගයේ මව් විෂය පථයට එරෙහිව ඇගයීමට ලක් කෙරේ.

2. = බන්ධනය යනු ද්වි-මාර්ග ආකෘති බන්ධනය සඳහා ය. මව් විෂය පථයේ ආකෘතිය විධානයේ හුදකලා විෂය පථයේ ආකෘතියට සම්බන්ධ වේ. එක් ආකෘතියකට වෙනස් කිරීම අනෙකට බලපාන අතර අනෙක් අතට.

3. & බන්ධනය යනු ඔබේ නියෝගයේ විෂය පථයට ක්‍රමවේදයක් යැවීමයි, එවිට එය ඔබේ නියෝගය තුළ කැඳවිය හැකිය. මෙම ක්‍රමය විධානයෙහි මව් විෂය පථයට පෙර බැඳී ඇති අතර තර්ක සඳහා සහාය වේ. උදාහරණයක් ලෙස මෙම ක්‍රමය මව් විෂය පථයේ හෙලෝ (නම) නම්, ඔබේ විධානය ඇතුළත සිට ක්‍රමය ක්‍රියාත්මක කිරීම සඳහා, ඔබ call scope.hello ({name: 'world' call) අමතන්න.

කෙටි විස්තරයකින් විෂය පථ බන්ධන වෙත යොමු කිරීමෙන් මෙම වෙනස්කම් මතක තබා ගැනීම පහසු බව මට පෙනී ගියේය:

• @ නූල් බන්ධනය ආරෝපණය කරන්න
• = ද්වි-මාර්ග ආකෘති බන්ධනය
• & ඇමතුම් ආපසු ගැනීමේ ක්‍රමය බන්ධනය

ඔබේ නියෝගය ක්‍රියාත්මක කිරීමේදී විෂය පථ විචල්‍යය නියෝජනය කරන්නේ කුමක් ද යන්න සංකේත මගින් පැහැදිලි කරයි:

• @ නූල්
• = ආකෘතිය
• & ක්‍රමය

ප්‍රයෝජනවත් බව සඳහා (කෙසේ වෙතත් මට):

1. =
2. @
3. සහ

මෙම =ද්වි-දිශාව බන්ධන යනු, ඒ නිසා මව් විෂය පථය වෙත විචල්ය සැඳහුම. මෙයින් අදහස් කරන්නේ, ඔබ විධානයෙහි විචල්‍යය වෙනස් කළ විට, එය මව් විෂය පථයේ ද වෙනස් වනු ඇති බවයි.

@ එයින් අදහස් වන්නේ විචල්‍යය විධානයට පිටපත් කරනු ඇති බවයි.

මා දන්නා පරිදි, <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane>ද වැඩ කළ යුතුය. bi-titleවිධානයෙහි වෙනස් කළ හැකි මව් විෂය පථයේ විචල්‍ය අගය ලැබෙනු ඇත.

ඔබට මව් විෂය පථයේ විචල්‍යයන් කිහිපයක් වෙනස් කිරීමට අවශ්‍ය නම්, ඔබට විධානය තුළ සිටම මව් විෂය පථයේ ශ්‍රිතයක් ක්‍රියාත්මක කළ හැකිය (නැතහොත් සේවාවක් හරහා දත්ත යැවීම).

සජීවී ආදර්ශයක් සමඟ මෙය ක්‍රියා කරන්නේ කෙසේදැයි වැඩි විස්තර දැකීමට ඔබ කැමති නම්. 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>"
    };
});

@ නූල් ලෙස ලබා ගන්න

• මෙය කිසිදු ආකාරයක බැඳීමක් ඇති නොකරයි. ඔබ හුදෙක් ඔබ සම්මත කළ වචනය නූලක් ලෙස ලබා ගනී

= 2 ආකාර බන්ධනය

• පාලකයෙන් සිදු කරන ලද වෙනස්කම් විධානය විසින් දරනු ලබන සඳහනෙන් පිළිබිඹු වන අතර අනෙක් අතට

&මෙය ටිකක් වෙනස් ලෙස හැසිරේ, මන්දයත් විෂය පථයට ශ්‍රිතය ලැබෙන්නේ එය පසු කළ වස්තුව නැවත ලබා දෙන බැවිනි. මම හිතන්නේ මෙය ක්‍රියාත්මක කිරීමට අවශ්‍ය විය. ෆෙඩල් විසින් මෙය පැහැදිලි කළ යුතුය.

• මෙම ලබා ගැනීමේ ශ්‍රිතය ඇමතීමෙන් පසු, ලැබෙන වස්තුව පහත පරිදි ක්‍රියා කරයි:
  • ශ්‍රිතයක් සම්මත වූයේ නම් : ඇමතුම ලබා දුන් විට එය මව් (පාලක) වසා දැමීමේදී ක්‍රියාත්මක වේ
  • ශ්‍රිතයක් සම්මත නොවූයේ නම් : බන්ධන නොමැති වස්තුවේ දේශීය පිටපතක් ලබා ගන්න

මෙම ප්‍රහේලිකාව ඔවුන් ක්‍රියා කරන ආකාරය නිරූපණය කළ යුතුය . get...මා අදහස් කරන දෙය වඩා හොඳින් අවබෝධ කර ගැනීම සඳහා නාමයෙන් විෂය පථයේ කාර්යයන් කෙරෙහි විශේෂ අවධානයක් යොමු කරන්න&

විධානයෙහි විෂය පථය එකතු කළ හැකි ආකාර තුනක් තිබේ:

1. දෙමාපිය විෂය පථය : මෙය සුපුරුදු විෂය පථයේ උරුමයයි.

විධානය සහ එහි මවුපිය (එය පිහිටා ඇති පාලක / විධානය) විෂය පථය සමාන වේ. එබැවින් විධානය තුළ විෂය පථ විචල්‍යයන්හි සිදුකරන ලද ඕනෑම වෙනස්කමක් මව් පාලකයේ ද පිළිබිඹු වේ. එය පෙරනිමිය බැවින් ඔබට මෙය සඳහන් කිරීමට අවශ්‍ය නැත.

2. ළමා විෂය පථය : විධානය මඟින් විෂය පථය විචල්‍යයක් ලෙස ඔබ නියම කරන්නේ නම්, දෙමව්පියන්ගේ විෂය පථයෙන් උරුම වන ළමා විෂය පථයක් නිර්මාණය කරයි.

මෙන්න, ඔබ විධානය තුළ විෂය පථ විචල්‍යයන් වෙනස් කරන්නේ නම්, එය මව් විෂය පථය තුළ පිළිබිඹු නොවනු ඇත, නමුත් ඔබ විෂය පථයේ විචල්‍යයක දේපල වෙනස් කරන්නේ නම්, එය මව් විෂය පථය තුළ පිළිබිඹු වේ. .

උදාහරණයක්,

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.
        }
    };
});

3. හුදකලා විෂය පථය : පාලක විෂය පථයෙන් උරුම නොවන විෂය පථය නිර්මාණය කිරීමට ඔබට අවශ්‍ය විට මෙය භාවිතා වේ.

මෙය සිදුවන්නේ ඔබ ප්ලගීන නිර්මාණය කරන විටය, මෙය ඕනෑම 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  )

@ යන්නෙන් අදහස් වන්නේ පාලක විෂය පථයෙන් සිදුවන වෙනස්කම් විධානය විෂය පථය තුළ පිළිබිඹු වන නමුත් ඔබ විධානයෙහි විෂය පථයේ අගය වෙනස් කළහොත් පාලක විෂය පථයේ විචල්‍යයට බලපෑමක් සිදු නොවන බවයි.

@ සැමවිටම සිතියම්ගත කළ ගුණාංගය ප්‍රකාශනයක් වනු ඇතැයි අපේක්ෂා කරයි. මෙය ඉතා වැදගත් ය; “@” උපසර්ගය වැඩ කිරීමට නම්, අපි ගුණාංග අගය {{} within තුළට එතිය යුතුය.

= ද්විපාර්ශ්වික වේ, එබැවින් ඔබ විචල්ය දිශානති විෂය පථයෙන් වෙනස් කරන්නේ නම්, පාලක විෂය පථයේ විචල්‍යයට ද බලපායි

& පාලක විෂය පථය බන්ධනය කිරීමට භාවිතා කරන අතර එමඟින් අවශ්‍ය නම් අපට එය විධානයෙන් ඇමතිය හැකිය

මෙහි ඇති වාසිය නම් පාලකයේ විෂය පථය හා මෙහෙයවීමේ විෂය පථය තුළ විචල්‍යයේ නම සමාන නොවීමයි.

නිදසුනක් ලෙස, ඩිරෙක්ටිව් විෂය පථයට විචල්ය "ඩර්වර්" ඇති අතර එය පාලක විෂය පථයේ විචල්ය "කොන්ටවර්" සමඟ සමමුහුර්ත කරයි. එක් පාලකයෙකුට විචල්‍ය v1 සමඟ සමමුහුර්ත කළ හැකි බැවින් මෙය විධානයට විශාල බලයක් සහ සාමාන්‍යකරණයක් ලබා දෙන අතර එකම විධානය භාවිතා කරන තවත් පාලකයෙකුට විචල්‍ය v2 සමඟ සමමුහුර්ත කිරීමට dirVar වෙතින් ඉල්ලා සිටිය හැකිය.

භාවිතයේ උදාහරණය පහත දැක්වේ:

විධානය සහ පාලකය:

 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
        }
    };
});

සහ html (@ සහ = සඳහා වෙනස සටහන් කරන්න):

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

මෙන්න එය මනාව විස්තර කරන බ්ලොග් අඩවියට සබැඳියක් .

අපට භාවිතා කළ හැක්කේ: -

1. @ : - එක් ආකාරයකින් දත්ත අගයන් සඳහා සංගීත අගයන් සඳහා. එක් ආකාරයකින් දත්ත බන්ධනය කිරීමෙන් ඔබට විෂය පථයේ අගය නියමයට පමණක් යැවිය හැකිය

2. = : - ද්වි-මාර්ග දත්ත බන්ධනය සඳහා වස්තු වටිනාකම සඳහා. දෙයාකාරයකින් දත්ත බන්ධනය කිරීමෙන් ඔබට විෂය පථයේ අගය විධානයෙහි මෙන්ම html වලද වෙනස් කළ හැකිය.

3. & : - ක්‍රම සහ කාර්යයන් සඳහා.

සංස්කරණය කරන්න

කෝණික අනුවාදය 1.5 සඳහා අපගේ සංරචක අර්ථ දැක්වීමේදී සහ ඊට ඉහළින් විවිධ බන්ධන වර්ග හතරක් ඇත:

1. = ද්වි-මාර්ග දත්ත බන්ධනය : - අපි අගය වෙනස් කළහොත් එය ස්වයංක්‍රීයව යාවත්කාලීන වේ

2. < එක් ක්‍රමයක් බැඳීම : - අපට මව් විෂය පථයෙන් පරාමිතියක් කියවා එය යාවත්කාලීන නොකිරීමට අවශ්‍ය වූ විට.

3. @මෙය සංගීත පරාමිතීන් සඳහා වේ

4. &ඔබේ සංරචකය එහි මව් විෂය පථයට යමක් ප්‍රතිදානය කිරීමට අවශ්‍ය නම් මෙය ඇමතුම් සඳහා වේ

මම කුඩා HTML ගොනුවක් නිර්මාණය කළ අතර ඒවා අතර ඇති වෙනස්කම් පෙන්නුම් කරන කෝණික කේත අඩංගු වේ:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
        attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
        attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
        attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
      ></a>
    </div>
    <script>
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
      }
    }])
    .directive("myDir", [function(){
      return {
        scope: {
          attr1: "=",
          attr2: "@",
          attr3: "&"
        },
        link: function(scope){
          console.log(scope.attr1);   // =, logs "Hey there, Juan"
          console.log(scope.attr2);   // @, logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // &, logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // &, logs "Hey there, Juan"
        }
      }
    }]);
    </script>
  </body>
</html>

මෙම = ක්රමයකි බන්ධන 2-ආකාරය ඔබට ඇති ඉඩ දෙනවා වන සජීවී ඔබගේ උපදෙස් තුල වෙනස්කම්. යමෙකු එම විචල්‍යය විධානයෙන් වෙනස් කළ විට, ඔබේ නියෝගය තුළ එම වෙනස් කළ දත්ත ඔබ සතුව ඇත, නමුත් @ මාර්ගය දෙයාකාරයකින් බැඳී නොමැත . එය පෙළ මෙන් ක්‍රියා කරයි . ඔබ එක් වරක් බැඳ තබන අතර ඔබට එහි වටිනාකම පමණක් ලැබෙනු ඇත.

එය වඩාත් පැහැදිලිව ලබා ගැනීම සඳහා, ඔබට මෙම විශිෂ්ට ලිපිය භාවිතා කළ හැකිය:

AngularJS දිශානති විෂය පථය '@' සහ '='

මෙම ප්‍රශ්නය දැනටමත් පහර දී ඇත, නමුත් වෙනත් අයෙකු AngularJS විෂය පථයන්හි ඇති භයානක අවුල සමඟ පොරබදන්නේ නම් මම කෙසේ හෝ මෙය බෙදා ගනිමි. මෙම ආවරණය වනු ඇත =, <, @, &හා ::. සම්පූර්ණ ලිවීම මෙහි සොයාගත හැකිය .

=දෙයාකාර බන්ධනයක් ස්ථාපිත කරයි. දෙමව්පියන් තුළ ඇති දේපල වෙනස් කිරීම දරුවාගේ වෙනස් වීමට හේතු වන අතර අනෙක් අතට.

<දෙමව්පියන්ට දරුවාට එක් ආකාරයකින් බැඳීමක් ඇති කරයි. දෙමව්පියන් තුළ ඇති දේපල වෙනස් කිරීම දරුවාගේ වෙනස් වීමට හේතු වනු ඇත, නමුත් ළමා දේපල වෙනස් කිරීම දෙමාපිය දේපළට බලපාන්නේ නැත.

@ටැග් ගුණාංගයේ තන්තු වටිනාකම ළමා දේපල වෙත පවරනු ඇත. ගුණාංගයේ ප්‍රකාශනයක් තිබේ නම් , ප්‍රකාශනය වෙනත් නූලකට තක්සේරු කරන සෑම විටම ළමා දේපල යාවත්කාලීන වේ. උදාහරණයක් වශයෙන්:

<child-component description="The movie title is {{$ctrl.movie.title}}" />

bindings: {
    description: '@', 
}

මෙන්න, descriptionළමා විෂය පථයේ ඇති දේපල ප්‍රකාශනයේ වත්මන් අගය වනු ඇත "The movie title is {{$ctrl.movie.title}}", එහිදී movieමව් විෂය පථයේ වස්තුවක් ඇත.

&එය ටිකක් උපක්‍රමශීලී වන අතර ඇත්ත වශයෙන්ම එය කිසි විටෙකත් භාවිතා කිරීමට බලවත් හේතුවක් නොමැති බව පෙනේ. ළමා විෂය පථයෙන් විචල්‍යයන් සමඟ පරාමිතීන් ආදේශ කරමින් මව් විෂය පථයේ ප්‍රකාශනයක් ඇගයීමට එය ඔබට ඉඩ සලසයි. උදාහරණයක් ( ප්ලං ):

<child-component 
  foo = "myVar + $ctrl.parentVar + myOtherVar"
</child-component>

angular.module('heroApp').component('childComponent', {
  template: "<div>{{  $ctrl.parentFoo({myVar:5, myOtherVar:'xyz'})  }}</div>",
  bindings: {
    parentFoo: '&foo'
  }
});

ලබා parentVar=10දී ඇති පරිදි, ප්‍රකාශනය parentFoo({myVar:5, myOtherVar:'xyz'})ඇගයීමට ලක් කෙරෙන 5 + 10 + 'xyz'අතර සංරචකය පහත පරිදි වේ:

<div>15xyz</div>

ඔබට කවදා හෝ මෙම කැටි ගැසුණු ක්‍රියාකාරිත්වය භාවිතා කිරීමට අවශ්‍ය වන්නේ කවදාද? &දෙමව්පියන්ගේ විෂය පථය තුළ ඇමතුම් ලබා ගැනීමේ කාර්යයක් ළමා විෂය පථයට යැවීමට බොහෝ විට මිනිසුන් භාවිතා කරයි. කෙසේ වෙතත්, යථාර්ථයේ දී, ශ්‍රිතය පසු කිරීම සඳහා '<' භාවිතා කිරීමෙන් එකම බලපෑමක් ලබා ගත හැකි අතර, එය වඩාත් සරල වන අතර පරාමිතීන් ( {myVar:5, myOtherVar:'xyz'}) පසු කිරීම සඳහා අමුතු වක්‍ර වරහන් සින්ටැක්ස් මග හැරේ . සලකා බලන්න:

භාවිතා කර නැවත කැඳවීම &:

<child-component parent-foo="$ctrl.foo(bar)"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo({bar:'xyz'})">Call foo in parent</button>',
  bindings: {
    parentFoo: '&'
  }
});

භාවිතා කර නැවත කැඳවීම <:

<child-component parent-foo="$ctrl.foo"/>

angular.module('heroApp').component('childComponent', {
  template: '<button ng-click="$ctrl.parentFoo('xyz')">Call foo in parent</button>',
  bindings: {
    parentFoo: '<'
  }
});

වස්තූන් (සහ අරා) පිටපත් කරනු ලබන්නේ ළමා විෂය පථයට යොමු වීමෙනි. මෙයින් අදහස් කරන්නේ එය එක්-මාර්ග බැඳීමක් වුවද, ඔබ දෙමව්පියන් හා ළමා විෂය පථය තුළ එකම වස්තුවක් සමඟ වැඩ කරන බවයි.

ක්‍රියාත්මක වන විවිධ උපසර්ග බැලීමට මෙය විවෘත කරන්න plunk .

[නිල ලියකියවිලි]
AngularJS හි පසු සංස්කරණ මඟින් එක් වරක් බන්ධනය කිරීමේ විකල්පය හඳුන්වා දෙයි, එහිදී ළමා විෂය පථය යාවත්කාලීන වන්නේ එක් වරක් පමණි. මව් දේපල නැරඹීමේ අවශ්‍යතාවය ඉවත් කිරීමෙන් මෙය කාර්ය සාධනය වැඩි දියුණු කරයි. වාක්‍ය ඛණ්ඩය ඉහළින් වෙනස් ය; එක් වරක් බැඳීමක් ප්‍රකාශ කිරීමට, ඔබ සංරචක ටැගයේ:: ප්‍රකාශනය ඉදිරිපිට එකතු කරයි :

<child-component 
  tagline = "::$ctrl.tagline">
</child-component>

මෙය taglineඑක් මාර්ගයක් හෝ ද්වි-මාර්ග බැඳීමක් ඇති නොකර ළමා විෂය පථයේ වටිනාකම ප්‍රචාරණය කරනු ඇත . සටහන : taglineමුලින් undefinedමව් විෂය පථයේ තිබේ නම්, එය වෙනස් වන තෙක් කෝණික එය බලා පසුව ළමා විෂය පථයට අනුරූප දේපල එක් වරක් යාවත්කාලීන කරනු ඇත.

සාරාංශය

දේපල වස්තුවක්, අරාව, නූල් යනාදිය මත පදනම්ව උපසර්ග ක්‍රියා කරන ආකාරය පහත වගුවේ දැක්වේ.

@ දේශීය විෂය පථය දේපල උපදෙස් පිට අර්ථ නිරූපනය කර ඇත බව ප්රවේශ ඈඳීම කිරීමට භාවිතා කරයි.

= පිටත විෂය පථය සහ විධානයේ හුදකලා විෂය පථය අතර ද්වි-මාර්ග බන්ධනයක් නිර්මාණය කිරීමට අවශ්‍ය අවස්ථාවන්හිදී ඔබට = අක්‍ෂරය භාවිතා කළ හැකිය.

සහ දේශීය විෂය පථයේ දේපල මඟින් පාරිභෝගිකයාට විධානයක් ඉල්ලා සිටිය හැකි ශ්‍රිතයක් තුළට යාමට අවසර දෙයි.

උදාහරණ සමඟ ඔබට පැහැදිලි අවබෝධයක් ලබා දෙන පහත සබැඳිය කරුණාකර පරීක්ෂා කරන්න. එය සැබවින්ම ප්‍රයෝජනවත් බව මට පෙනී ගියේය.

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

විෂය පථය දේශීය වූවත්, ඔබේ උදාහරණයේ දී මෙන්, ඔබට දේපල හරහා මව් විෂය පථයට ප්‍රවේශ විය හැකිය $parent. පහත කේතය උපකල්පනය කරන්න, titleඑය මව් විෂය පථය මත අර්ථ දක්වා ඇත. එවිට ඔබට මාතෘකාව ලෙස ප්‍රවේශ විය හැකිය $parent.title:

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

කෙසේ වෙතත් බොහෝ අවස්ථාවන්හිදී එකම බලපෑම ගුණාංග භාවිතයෙන් වඩා හොඳින් ලබා ගනී.

"හුදකලා විෂය පථයෙන් දත්ත ප්‍රකාශනයක් හරහා සහ මව් විෂය පථයට යැවීම සඳහා" භාවිතා කරන "&" අංකනය සොයාගත් තැනට උදාහරණයක්, ප්‍රයෝජනවත් (සහ ද්වි-මාර්ග දත්ත සමුදායක් භාවිතා කළ නොහැක) නියෝගයක් විය ng- පුනරාවර්තනයක් තුළ විශේෂ දත්ත ව්‍යුහයක් විදැහුම් කිරීම සඳහා.

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

විදැහුම්කරණයේ එක් කොටසක් මකාදැමීමේ බොත්තමක් වූ අතර මෙහි & & හරහා බාහිර විෂය පථයෙන් මකාදැමීමක් ඇමිණීම ප්‍රයෝජනවත් විය. විදැහුම්-විධානය ඇතුළත එය පෙනේ

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

ද්වි-මාර්ග දත්ත සමුදාය එනම් සෑම චක්‍රයකම data = "="මකාදැමීමේ කාර්යය ක්‍රියාත්මක වන බැවින් එය භාවිතා කළ නොහැක $digest, එය හොඳ නැත, මන්ද එම වාර්තාව වහාම මකාදැමෙන අතර කිසි විටෙකත් විදැහුම් නොකෙරේ.

හැකි සෑම විකල්පයක්ම මම ක්‍රියාත්මක කළෙමි.

එය සියලු විකල්ප සමඟ කටයුතු කරයි:

scope:{
    name:'&'
},

scope:{
    name:'='
},

scope:{
    name:'@'
},

scope:{

},

scope:true,

https://jsfiddle.net/rishulmatta/v7xf2ujm

ඔවුන් අතර ඇති ප්‍රධාන වෙනස සාධාරණයි

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

@සහ =වෙනත් පිළිතුරු බලන්න.

එක් gotcha ගැන TL; ඩී; දෙමව්පියන්ගෙන් ප්‍රකාශනය ලබා ගනී (වෙනත් පිළිතුරු වල උදාහරණ මෙන් ක්‍රියා නොකරයි), එය ප්‍රකාශනය ලෙස හඳුන්වන විධානයෙහි ශ්‍රිතයක් ලෙස සකසයි. තවද මෙම ශ්‍රිතයට ඕනෑම විචල්‍යයක් (ශ්‍රිත නාමයක් පවා) ප්‍රතිස්ථාපනය කිරීමේ හැකියාව ඇත . &

&

පැහැදිලි
& ඔබ වගේ දෙයක් සමත් නම් නොවන බව, ප්රකාශනයක් සඳහනක් <myDirective expr="x==y"></myDirective>
එම නියෝගය මෙම expr: මෙන්ම, ප්රකාශනය ඉල්ලා සිටින ශ්රිතයක්, වනු ඇත
function expr(){return x == y}.
එබැවින් විධානයෙහි html <button ng-click="expr()"></button>මඟින් ප්‍රකාශනය අමතනු ඇත. විධානයෙහි js හි $scope.expr()ප්‍රකාශනය ද අමතනු ඇත.
ප්‍රකාශනය දෙමව්පියන්ගේ $ scope.x සහ $ scope.y සමඟ කැඳවනු ලැබේ.
පරාමිතීන් අභිබවා යාමට ඔබට හැකියාව තිබේ!
ඔබ ඒවා ඇමතුමකින් සකසන්නේ <button ng-click="expr({x:5})"></button>
නම් , උදා: එවිට ඔබේ පරාමිතිය xසහ දෙමව්පියන්ගේ පරාමිතිය සමඟ ප්‍රකාශනය කැඳවනු ලැබේ y.
ඔබට දෙකම අභිබවා යා හැකිය.
දැන් ඔබ දන්නවා, ඇයි . එහෙත් එය කළ හැකි: හෝ ළමා ඇමතුම: .<button ng-click="functionFromParent({x:5})"></button> වැඩ කරන්නේ.
මන්ද එය දෙමව්පියන්ගේ ප්‍රකාශනය ලෙස හඳුන්වන බැවිනි (උදා<myDirective functionFromParent="function1(x)"></myDirective>) සහ විය හැකි අගයන් ඔබගේ නිශ්චිත පරාමිතීන් සමඟ ප්‍රතිස්ථාපනය කරයිx

<myDirective functionFromParent="function1(x) + 5"></myDirective>

<myDirective functionFromParent="function1(x) + z"></myDirective>

<button ng-click="functionFromParent({x:5, z: 4})"></button>
හෝ ශ්‍රිතය ප්‍රතිස්ථාපනය සමඟ පවා:
<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button> .

එය හුදෙක් ප්‍රකාශනයක්, එය ශ්‍රිතයක් හෝ බොහෝ කාර්යයන් හෝ සැසඳීමක් නම් කමක් නැත. ඔබට මෙම ප්‍රකාශනයේ ඕනෑම විචල්‍යයක් ප්‍රතිස්ථාපනය කළ හැකිය .

උදාහරණ: ඇමතුම්
කේතය එදිරිව විධානය අච්චුව:
දෙමව්පියන් විසින් අර්ථ දක්වා ඇත්තේ $ scope.x, $ scope.y:
මාපිය අච්චුව: ඇමතුම් ඇමතුම්<myDirective expr="x==y"></myDirective>
<button ng-click="expr()"></button>$scope.x==$scope.y
<button ng-click="expr({x: 5})"></button>5 == $scope.y
<button ng-click="expr({x:5, y:6})"></button>5 == 6

දෙමව්පියන් අර්ථ දක්වා ඇත්තේ $ scope.function1, $ scope.x, $ scope.y:
මාපිය අච්චුව:<myDirective expr="function1(x) + y"></myDirective>

<button ng-click="expr()"></button>ඇමතුම් $scope.function1($scope.x) + $scope.y
<button ng-click="expr({x: 5})"></button>ඇමතුම් $scope.function1(5) + $scope.y
<button ng-click="expr({x:5, y:6})"></button>ඇමතුම් $scope.function1(5) + 6
විධානයට function scope.myFn ශ්‍රිතයක් ඇත:
<button ng-click="expr({function1: myFn, x:5, y:6})"></button> ඇමතුම්$scope.myFn(5) + 6

මට "@ 'සමඟ" {{මාතෘකාව}} "සහ' = 'සමඟ" මාතෘකාව "භාවිතා කළ යුත්තේ ඇයි?

ඔබ {{මාතෘකාව} use භාවිතා කරන විට, යොමු කිරීමේ දර්ශනයට යොමු කරනු ලබන්නේ මව් විෂය පථයේ අගය පමණි. මෙය එක් මාර්ගයකට සීමා වේ, එයින් අදහස් වන්නේ වෙනස මව් විෂය පථයෙන් පිළිබිඹු නොවන බවයි. දෙමව්පියන්ගේ විෂය පථයට ළමා විධානයෙහි සිදු කර ඇති වෙනස්කම් පිළිබිඹු කිරීමට ඔබට අවශ්‍ය විටදී ඔබට '=' භාවිතා කළ හැකිය. මෙය ක්‍රම දෙකකි.

මගේ අංගය ගුණාංගයකින් සරසා නොගෙන මට මව් විෂය පථයට කෙලින්ම පිවිසිය හැකිද?

විධානයට විෂය පථය ආරෝපණය කර ඇති විට (විෂය පථය: {}), එවිට ඔබට තවදුරටත් මව් විෂය පථයට කෙලින්ම පිවිසිය නොහැක. නමුත් තවමත් එය විෂය පථය හරහා ප්‍රවේශ විය හැකිය. $ මවුපියන් යනාදිය ඔබ විධානයෙන් විෂය පථය ඉවත් කරන්නේ නම්, එය කෙලින්ම ප්‍රවේශ විය හැකිය.

ප්‍රලේඛනය පවසන්නේ “බොහෝ විට හුදකලා විෂය පථයෙන් දත්ත ප්‍රකාශනයක් හරහා සහ මව් විෂය පථයට යැවීම යෝග්‍ය වේ”, නමුත් එය ද්විපාර්ශ්වික බන්ධනය සමඟ ද හොඳින් ක්‍රියාත්මක වන බව පෙනේ. ප්‍රකාශන මාර්ගය වඩා හොඳ වන්නේ ඇයි?

එය සන්දර්භය මත රඳා පවතී. ඔබට ප්‍රකාශනයක් ඇමතීමට හෝ දත්ත සමඟ ක්‍රියා කිරීමට අවශ්‍ය නම්, ඔබ භාවිතා කරන අතර ඔබට දත්ත බෙදා ගැනීමට අවශ්‍ය නම්, ඔබට '=' භාවිතා කරමින් ද්විපාර්ශ්වික ක්‍රමයක් භාවිතා කළ හැකිය.

පහත දැක්වෙන සබැඳියෙන් දත්ත යොමු කිරීමේ විවිධ ක්‍රම අතර ඇති වෙනස්කම් ඔබට සොයාගත හැකිය:

AngularJS - හුදකලා වූ විෂය පථ - @ vs = vs &

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

String ආරෝපණ නූල් බන්ධනය (එක් ක්‍රමයක්) = ද්වි-මාර්ග ආකෘති බන්ධනය සහ ඇමතුම් ලබා ගැනීමේ ක්‍රමය බන්ධනය

/ DOM ගුණාංගයේ තක්සේරු කළ වටිනාකමට දේශීය / විධානයන් විෂය පථයක් බැඳ තබයි. = දේශීය / නියෝග විෂය පථයේ දේපලක් මව් විෂය පථයට සම්බන්ධ කරයි. & බන්ධනය යනු ඔබේ නියෝගයේ විෂය පථයට ක්‍රමවේදයක් යැවීමයි, එවිට එය ඔබේ නියෝගය තුළ කැඳවිය හැකිය.

String ගුණාංග නූල් බන්ධනය = ද්වි-මාර්ග ආකෘති බන්ධනය සහ ඇමතුම් ලබා ගැනීමේ ක්‍රම බන්ධනය