AngularJS හි විෂය පථයේ මූලාකෘති / මූලාකෘති උරුමයේ සූක්ෂ්මතා මොනවාද?

මෙම API විමර්ශන විෂය පථය පිටුව පවසයි:

ඒ විෂය පථය හැකි දෙමාපියන් විෂය පථය සිට උරුම.

මෙම සංවර්ධක මාර්ගෝපදේශය විෂය පථය පිටුව පවසයි:

විෂය පථයක් (මූලාකෘතිමය වශයෙන්) එහි මව් විෂය පථයෙන් ගුණාංග උරුම කර ගනී.

• ඉතින්, ළමා විෂය පථය සැමවිටම මූලාකෘතිමය වශයෙන් එහි මව් විෂය පථයෙන් උරුම වේද?
• ව්යතිරේක තිබේද?
• එය උරුම වූ විට, එය සැමවිටම සාමාන්‍ය ජාවාස්ක්‍රිප්ට් මූලාකෘති උරුමයක්ද?

ඉක්මන් පිළිතුර :
ළමා විෂය පථයක් සාමාන්‍යයෙන් මූලාකෘතිමය වශයෙන් එහි මව් විෂය පථයෙන් උරුම වන නමුත් සෑම විටම නොවේ. මෙම රීතියට එක් ව්‍යතිරේකයකි scope: { ... }- මෙය නියම කිරීමකි - මෙය මූලාකෘතිමය වශයෙන් උරුම නොවන "හුදකලා" විෂය පථයක් නිර්මාණය කරයි. "නැවත භාවිතා කළ හැකි සංරචක" විධානයක් නිර්මාණය කිරීමේදී මෙම ඉදිකිරීම බොහෝ විට භාවිතා වේ.

සූක්ෂ්ම කරුණු සම්බන්ධයෙන් ගත් කල, විෂය පථයේ උරුමය සාමාන්‍යයෙන් සරල ය ... ඔබට ළමා විෂය පථය තුළ ද්වි- මාර්ග දත්ත බන්ධනයක් (එනම්, ආකෘති මූලද්‍රව්‍ය, එන්ජී-ආකෘතිය) අවශ්‍ය වන තෙක්. ළමා විෂය පථය තුළ සිට මව් විෂය පථයේ ඇති ප්‍රාථමික (උදා: අංකය, නූල්, බූලියන්) සමඟ බැඳීමට ඔබ උත්සාහ කරන්නේ නම් එන්ජී-පුනරාවර්තනය, එන්ජී-ස්විච් සහ එන්ජී ඇතුළත් කිරීම ඔබට ඉහළට යා හැකිය . එය ක්‍රියාත්මක විය යුතු යැයි බොහෝ දෙනා අපේක්ෂා කරන ආකාරයට එය ක්‍රියා නොකරයි. ළමා විෂය පථයට එකම නමක් ඇති මව් දේපල සඟවන / සෙවනැලි කරන දේපළක් ලැබේ. ඔබේ ක්‍රියාමාර්ග

1. ඔබේ ආකෘතිය සඳහා දෙමව්පියන් තුළ ඇති වස්තු නිර්වචනය කරන්න, ඉන්පසු දරුවා තුළ එම වස්තුවේ දේපලක් සඳහන් කරන්න: parentObj.someProp
2. $ parent.parentScopeProperty භාවිතා කරන්න (සෑම විටම කළ නොහැකි නමුත් 1 ට වඩා පහසුය)
3. මව් විෂය පථයේ ශ්‍රිතයක් නිර්වචනය කර එය දරුවාගෙන් අමතන්න (සෑම විටම කළ නොහැකි)

නව AngularJS සංවර්ධකයින් බොහෝ විට බව තේරුම් නැහැ ng-repeat, ng-switch, ng-view, ng-includeහා ng-ifමෙම උපදෙස් සම්බන්ධ වූ විට ප්රශ්නය බොහෝ විට පෙන්නුම් කරයි ඒ නිසා සියලු නව ළමා විෂය පථ නිර්මාණය. ( ගැටලුව පිළිබඳ ඉක්මන් නිදර්ශනයක් සඳහා මෙම උදාහරණය බලන්න .)

සෑම විටම '' ඇති 'හොඳම පුරුද්ද' අනුගමනය කිරීමෙන් ප්‍රාථමිකයන් සමඟ ඇති මෙම ගැටළුව පහසුවෙන් වළක්වා ගත හැකිය . ඔබේ ආකෘති වල - මිනිත්තු 3 ක් වටිනා බලන්න. මිස්කෝ විසින් ප්‍රාථමික බන්ධන ගැටළුව නිරූපණය කරයි ng-switch.

'තිබීම.' ඔබේ ආකෘති තුළ මූලාකෘති උරුමය ක්‍රියාත්මක වන බව සහතික කරනු ඇත. එබැවින් භාවිතා කරන්න

<input type="text" ng-model="someObj.prop1">

<!--rather than
<input type="text" ng-model="prop1">`
-->

ජාවාස්ක්‍රිප්ට් මූලාකෘති උරුමය

AngularJS විකියෙහි ද තබා ඇත: https://github.com/angular/angular.js/wiki/Understanding-Scopes

මූලාකෘති උරුමය පිළිබඳ ස්ථිර අවබෝධයක් තිබීම පළමුව වැදගත් වේ, විශේෂයෙන් ඔබ සේවාදායක පාර්ශවීය පසුබිමකින් පැමිණෙන්නේ නම් සහ ඔබ පන්ති-අයිකල් උරුමය පිළිබඳව වඩාත් හුරුපුරුදු නම්. එබැවින් පළමුව එය සමාලෝචනය කරමු.

දෙමාපිය විෂය පථයට aString, aNumber, anArray, anObject සහ aFunction යන ගුණාංග ඇතැයි සිතමු. චිල්ඩ්ස්කෝප් මූලාකෘතිමය වශයෙන් මාපිය දර්ශනයෙන් උරුම වන්නේ නම්, අපට ඇත්තේ:

(අවකාශය ඉතිරි කර ගැනීම සඳහා, මම anArrayවස්තුව වෙනම අළු වචන තුනක් සහිත තනි නිල් වස්තුවකට වඩා එහි අගයන් තුන සහිත තනි නිල් වස්තුවක් ලෙස පෙන්වමි .)

ළමා විෂය පථයෙන් මාපිය විෂය පථයෙන් අර්ථ දක්වා ඇති දේපලකට ප්‍රවේශ වීමට අප උත්සාහ කරන්නේ නම්, ජාවාස්ක්‍රිප්ට් මුලින්ම ළමා විෂය පථය දෙස බලනු ඇත, දේපල සොයා නොගනී, පසුව උරුම වූ විෂය පථය දෙස බලා දේපල සොයා ගනී. (එය මව්පිය විෂය පථයේ දේපල සොයා නොගත්තේ නම්, එය මූලාකෘති දාමය දිගටම කරගෙන යනු ඇත ... මූල විෂය පථය දක්වාම). ඉතින්, මේ සියල්ල සත්‍ය ය:

childScope.aString === 'parent string'
childScope.anArray[1] === 20
childScope.anObject.property1 === 'parent prop1'
childScope.aFunction() === 'parent output'

අපි එසේ කරමු යැයි සිතමු:

childScope.aString = 'child string'

මූලාකෘති දාමය විමසා නොගන්නා අතර ළමා දර්ශනයට නව aString දේපලක් එක් කරනු ලැබේ. මෙම නව දේපල මව්පිය දේපල එකම නමකින් සඟවයි / සෙවනැලි කරයි. අපි ng- පුනරාවර්තනය සහ ng- ඇතුළත් කිරීම ගැන සාකච්ඡා කරන විට මෙය ඉතා වැදගත් වනු ඇත.

අපි එසේ කරමු යැයි සිතමු:

childScope.anArray[1] = '22'
childScope.anObject.property1 = 'child prop1'

ළමා දර්ශනයේ ඇති වස්තූන් (anArray සහ anObject) සොයාගත නොහැකි නිසා මූලාකෘති දාමය විමසනු ලැබේ. වස්තූන් මාපිය විෂය පථයෙන් සොයාගත හැකි අතර දේපල අගයන් මුල් වස්තූන් මත යාවත්කාලීන වේ. ළමා දර්ශනයට නව ගුණාංග එකතු නොකෙරේ; නව වස්තු කිසිවක් නිර්මාණය නොවේ. (ජාවාස්ක්‍රිප්ට් අරා සහ ශ්‍රිතවල ද වස්තු බව සලකන්න.)

අපි එසේ කරමු යැයි සිතමු:

childScope.anArray = [100, 555]
childScope.anObject = { name: 'Mark', country: 'USA' }

මූලාකෘති දාමය විමසනු නොලබන අතර, ළමා විෂය පථයට නව නාම වස්තු ගුණාංග දෙකක් ලැබෙනු ඇත.

රැගෙන යාම:

• අපි childScope.propertyX කියවනවා නම්, සහ ChildScope හි propertyX තිබේ නම්, මූලාකෘති දාමය විමසනු නොලැබේ.
• අපි childScope.propertyX සකසන්නේ නම්, මූලාකෘති දාමය විමසනු නොලැබේ.

අවසාන අවස්ථාව:

delete childScope.anArray
childScope.anArray[1] === 22  // true

අපි පළමුව ළමා දර්ශන දේපල මකා දැමුවෙමු, පසුව අපි නැවත දේපල වෙත ප්‍රවේශ වීමට උත්සාහ කරන විට, මූලාකෘති දාමය විමසනු ලැබේ.

කෝණික විෂය පථ උරුමය

තරඟකරුවන්:

• පහත දැක්වෙන්නේ නව විෂය පථයන් නිර්මාණය කරන අතර මූලාකෘතිමය වශයෙන් උරුම කර ගැනීමයි: ng- පුනරාවර්තනය, ng-include, ng-switch, ng-controller, directive with scope: true, directive with transclude: true.
• පහත දැක්වෙන්නේ මූලාකෘතිමය වශයෙන් උරුම නොවන නව විෂය පථයක් නිර්මාණය කරයි: සමඟ විධානය scope: { ... }. මෙය ඒ වෙනුවට "හුදකලා" විෂය පථයක් නිර්මාණය කරයි.

සටහන, පෙරනිමියෙන්, විධානයන් නව විෂය පථයක් නිර්මාණය නොකරයි - එනම් පෙරනිමිය scope: false.

ng-include

අපගේ පාලකයේ අප සිටී යැයි සිතමු:

$scope.myPrimitive = 50;
$scope.myObject    = {aNumber: 11};

සහ අපගේ HTML හි:

<script type="text/ng-template" id="/tpl1.html">
<input ng-model="myPrimitive">
</script>
<div ng-include src="'/tpl1.html'"></div>

<script type="text/ng-template" id="/tpl2.html">
<input ng-model="myObject.aNumber">
</script>
<div ng-include src="'/tpl2.html'"></div>

සෑම එන්ජී ඇතුළත් කිරීමකටම නව ළමා විෂය පථයක් ජනනය වන අතර එය මූලාකෘතිමය වශයෙන් මව් විෂය පථයෙන් උරුම වේ.

පළමු ආදාන පෙළ කොටුවට ටයිප් කිරීම (කියන්න, "77") දරුවාගේ විෂය පථයට එකම myPrimitiveවිෂය පථයේ දේපළ සැඟවීමට / සෙවනැලි කරන නව විෂය පථයක් ලබා ගැනීමට හේතු වේ . මෙය බොහෝ විට ඔබට අවශ්‍ය / බලාපොරොත්තු වන දේ නොවේ.

දෙවන ආදාන පෙළ කොටුවට ටයිප් කිරීම ("99" යැයි කියන්න) නව ළමා දේපලක් නොලැබේ. Tpl2.html ආකෘතිය වස්තු දේපලකට බැඳ ඇති හෙයින්, ngModel වස්තුව myObject සොයන විට මූලාකෘති උරුමය ආරම්භ වේ - එය මව් විෂය පථයෙන් සොයා ගනී.

අපගේ ආකෘතිය ප්‍රාථමිකයේ සිට වස්තුවකට වෙනස් කිරීමට අපට අවශ්‍ය නැතිනම් $ මාපිය භාවිතා කළ පළමු අච්චුව අපට නැවත ලිවිය හැකිය:

<input ng-model="$parent.myPrimitive">

මෙම ආදාන පෙළ කොටුවට ටයිප් කිරීම ("22" යැයි කියන්න) නව ළමා දේපලක් නොලැබේ. ආකෘතිය දැන් මව් විෂය පථයේ දේපලකට බැඳී ඇත (මක්නිසාද යත් $ දෙමව්පියන් යනු දෙමව්පියන්ගේ විෂය පථය සඳහන් කරන ළමා විෂය පථයක් වන දේපලකි).

සියළුම විෂය පථයන් සඳහා (මූලාකෘති හෝ නැත), කෝණික සෑම විටම මව්-ළමා සම්බන්ධතාවය (එනම් ධූරාවලියක්), විෂය පථය ගුණාංග හරහා සොයා ගනී $ මාපිය, $$ ළමා හෙඩ් සහ $$ ළමා ටේල්. මම සාමාන්‍යයෙන් රූප සටහන් වල මෙම විෂය පථ ගුණාංග නොපෙන්වයි.

ආකෘති මූලද්‍රව්‍ය සම්බන්ධ නොවන අවස්ථා සඳහා, තවත් විසඳුමක් වන්නේ ප්‍රාථමිකය වෙනස් කිරීම සඳහා මව් විෂය පථයේ ශ්‍රිතයක් නිර්වචනය කිරීමයි. මූලාකෘති උරුමය හේතුවෙන් දරුවාට සෑම විටම මෙම ශ්‍රිතය ඇමතීමට වග බලා ගන්න. උදා,

// in the parent scope
$scope.setMyPrimitive = function(value) {
     $scope.myPrimitive = value;
}

මෙන්න මෙම "මාපිය ශ්‍රිතය" ප්‍රවේශය භාවිතා කරන නියැදි ප්‍රහේලිකාවකි . (මෙම පිළිතුරෙහි කොටසක් ලෙස ෆෙඩල් ලියා ඇත: https://stackoverflow.com/a/14104318/215945 .)

Https://stackoverflow.com/a/13782671/215945 සහ https://github.com/angular/angular.js/issues/1267 ද බලන්න .

ng-switch

ng-switch විෂය පථයේ උරුමය ng-include මෙන් ක්‍රියා කරයි. එබැවින් ඔබට මව් විෂය පථයේ ප්‍රාථමිකයෙකුට ද්වි-මාර්ග දත්ත බැඳීමක් අවශ්‍ය නම්, $ මාපිය භාවිතා කරන්න, නැතහොත් ආකෘතිය වස්තුවක් ලෙස වෙනස් කර එම වස්තුවේ දේපලකට බැඳ තබන්න. මෙය ළමුන්ගේ විෂය පථය දෙමාපියන්ගේ විෂය පථයේ ගුණාංග සැඟවීම / සෙවනැලි කිරීම වළක්වනු ඇත.

AngularJS ද බලන්න , ස්විච් නඩුවක බන්ධන විෂය පථය?

ng- නැවත කරන්න

එන්ජී-පුනරාවර්තනය ටිකක් වෙනස් ලෙස ක්‍රියා කරයි. අපගේ පාලකයේ අප සිටී යැයි සිතමු:

$scope.myArrayOfPrimitives = [ 11, 22 ];
$scope.myArrayOfObjects    = [{num: 101}, {num: 202}]

සහ අපගේ HTML හි:

<ul><li ng-repeat="num in myArrayOfPrimitives">
       <input ng-model="num">
    </li>
<ul>
<ul><li ng-repeat="obj in myArrayOfObjects">
       <input ng-model="obj.num">
    </li>
<ul>

එක් එක් අයිතමය / පුනරාවර්තනය සඳහා, එන්ජී-පුනරාවර්තනය නව විෂය පථයක් නිර්මාණය කරයි, එය මූලාකෘතිමය වශයෙන් මව් විෂය පථයෙන් උරුම වේ, නමුත් එය නව ළමා විෂය පථයේ නව දේපලකට අයිතමයේ වටිනාකම පවරයි . (නව දේපලෙහි නම ලූප් විචල්‍යයේ නමයි.) Ng- පුනරාවර්තනය සඳහා කෝණික ප්‍රභව කේතය ඇත්ත වශයෙන්ම මෙන්න:

childScope = scope.$new();  // child scope prototypically inherits from parent scope
...
childScope[valueIdent] = value;  // creates a new childScope property

අයිතමය ප්‍රාථමික නම් (myArrayOfPrimitives හි මෙන්), අත්‍යවශ්‍යයෙන්ම වටිනාකමේ පිටපතක් නව ළමා විෂය පථයට පවරා ඇත. දරුවා විෂය පථය දේපල වටිනාකම වෙනස් (එනම්, ng ආකෘතිය, ඒ නිසා දරුවා විෂය පථය භාවිතා num) නැහැ නැහැ අරාව මව් විෂය පථය යොමු වෙනස් කරන්න. එබැවින් ඉහත සඳහන් කළ පළමු පුනරාවර්තනයේ දී, සෑම ළමා විෂය numපථයකටම myArrayOfPrimitives අරාවෙන් ස්වාධීන වූ දේපලක් ලැබේ:

මෙම ng- පුනරාවර්තනය ක්‍රියා නොකරනු ඇත (ඔබට අවශ්‍ය / බලාපොරොත්තු වන පරිදි). පෙළ කොටු තුළට ටයිප් කිරීම අළු කොටු වල අගයන් වෙනස් කරයි, ඒවා ළමා විෂය පථයන්හි පමණක් දැකිය හැකිය. අපට අවශ්‍ය වන්නේ යෙදවුම් myArrayOfPrimitives පෙළට බලපාන අතර ළමා විෂය පථයේ ප්‍රාථමික දේපල නොවේ. මෙය ඉටු කර ගැනීම සඳහා, අප විසින් වස්තු සමූහයක් ලෙස ආකෘතිය වෙනස් කළ යුතුය.

එබැවින්, අයිතමය වස්තුවක් නම්, නව ළමා විෂය පථයට මුල් වස්තුව පිළිබඳ සඳහනක් (පිටපතක් නොවේ). දරුවා විෂය පථය දේපල වටිනාකම වෙනස් (එනම්, ඒ නිසා, ng ආකෘතිය භාවිතා obj.num) නැහැ වස්තුව මව් විෂය පථය යොමු වෙනස් කරන්න. එබැවින් ඉහත දෙවන ng- පුනරාවර්තනයේ දී අපට ඇත්තේ:

(මම එක් පේළියක් අළු පැහැයට හුරු කරවන අතර එය යන්නේ කොතැනටද යන්න පැහැදිලි වේ.)

මෙය අපේක්ෂිත පරිදි ක්‍රියාත්මක වේ. පෙළ කොටු තුළට ටයිප් කිරීමෙන් අළු කොටු වල අගයන් වෙනස් වන අතර ඒවා දරුවාට සහ මව් විෂය පථයට දැකිය හැකිය.

මෙයද බලන්න ng-ආකෘතිය සමග අපහසුතා, ng-නැවත, හා යෙදවුම් හා https://stackoverflow.com/a/13782671/215945

ng- පාලකය

Ng- පාලකය භාවිතා කරන කූඩු පාලකයන්ගේ ප්‍රති results ලය වන්නේ ng-include සහ ng-switch වැනි සාමාන්‍ය මූලාකෘති උරුමයයි, එබැවින් එකම ක්‍රමවේදයන්ම අදාළ වේ. කෙසේ වෙතත්, "පාලකයන් දෙදෙනෙකුට $ විෂය පථ උරුමය හරහා තොරතුරු හුවමාරු කර ගැනීම නරක ආකාරයක් ලෙස සැලකේ" - http://onehungrymind.com/angularjs-sticky-notes-pt-1-architecture/ අතර දත්ත හුවමාරු කර ගැනීමට සේවාවක් භාවිතා කළ යුතුය. ඒ වෙනුවට පාලකයන්.

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

නියෝග

1. පෙරනිමි ( scope: false) - විධානය මඟින් නව විෂය පථයක් නිර්මාණය නොකරයි, එබැවින් මෙහි උරුමයක් නොමැත. මෙය පහසු සහ භයානක ය, මන්ද, උදා: නියෝගයක් සිතන්නේ එය දැනට පවතින දේපලක් සොරකම් කරන විට, එය විෂය පථයට නව දේපලක් නිර්මාණය කරන බවයි. නැවත භාවිතා කළ හැකි සංරචක ලෙස අදහස් කරන නියෝග ලිවීම සඳහා මෙය හොඳ තේරීමක් නොවේ.
2. scope: true- විධානය මඟින් නව ළමා විෂය පථයක් නිර්මාණය කරන අතර එය මූලාකෘතිමය වශයෙන් මව් විෂය පථයෙන් උරුම වේ. එක් විධානයකට වඩා (එකම DOM අංගයක් මත) නව විෂය පථයක් ඉල්ලා සිටියහොත්, නිර්මාණය වන්නේ එක් නව ළමා විෂය පථයක් පමණි. අපට “සාමාන්‍ය” මූලාකෘති උරුමයක් ඇති බැවින්, මෙය ng-include සහ ng-switch වැනි ය, එබැවින් දෙමාපිය විෂය පථ ප්‍රාථමිකයන්ට බන්ධනය වන ද්වි-මාර්ග දත්ත ගැන සැලකිලිමත් වන්න, සහ ළමා විෂය පථය දෙමාපිය විෂය පථයේ ගුණාංග සැඟවීම / සෙවනැලි කිරීම.
3. scope: { ... }- විධානය මඟින් නව හුදකලා / හුදකලා විෂය පථයක් නිර්මාණය කරයි. එය මූලාකෘතිමය වශයෙන් උරුම නොවේ. නැවත භාවිතා කළ හැකි සංරචක නිර්මාණය කිරීමේදී මෙය සාමාන්‍යයෙන් ඔබේ හොඳම තේරීම වේ, මන්දයත් විධානයට අහම්බෙන් මව් විෂය පථය කියවීමට හෝ වෙනස් කිරීමට නොහැකි බැවිනි. කෙසේ වෙතත්, එවැනි විධානයන්ට බොහෝ විට මව් විෂය පථ ගුණාංග කිහිපයකට ප්‍රවේශය අවශ්‍ය වේ. මව් විෂය පථය සහ හුදකලා විෂය පථය අතර ද්වි-මාර්ග බන්ධන ('=' භාවිතා කිරීම) හෝ එක්-මාර්ග බන්ධනයක් ('@' භාවිතා කිරීම) සැකසීමට වස්තු හැෂ් භාවිතා කරයි. දෙමාපිය විෂය පථ ප්‍රකාශන සමඟ බැඳීමට '&' ​​ද ඇත. ඉතින්, මේ සියල්ලම මව් විෂය පථයෙන් ලබාගත් දේශීය විෂය පථ ගුණාංග නිර්මාණය කරයි. බන්ධන සැකසීමට උපකාරී වන ගුණාංග භාවිතා කරන බව සලකන්න - ඔබට වස්තු හැෂ් තුළ මව් විෂය පථයේ දේපල නම් සඳහන් කළ නොහැක, ඔබට ගුණාංගයක් භාවිතා කළ යුතුය. උදා: ඔබට මව් දේපල සමඟ බැඳීමට අවශ්‍ය නම් මෙය ක්‍රියාත්මක නොවේparentPropහුදකලා විෂය පථය තුළ: <div my-directive>සහ scope: { localProp: '@parentProp' }. විධානයට බැඳීමට අවශ්‍ය එක් එක් මව් දේපල නියම කිරීමට ගුණාංගයක් භාවිතා කළ යුතුය: <div my-directive the-Parent-Prop=parentProp>සහ scope: { localProp: '@theParentProp' }.
   විෂය පථයේ __proto__යොමු වස්තු හුදකලා කරන්න. විෂය පථය හුදකලා කරන්න $ මාපිය විෂය පථය යොමු කරයි, එබැවින් එය හුදකලා වී ඇති අතර මව් විෂය පථයෙන් මූලාකෘති වශයෙන් උරුම නොවුවද, එය තවමත් ළමා විෂය පථයකි.
   පහත පින්තූරය සඳහා අප සතුව ඇති
   <my-directive interpolated="{{parentProp1}}" twowayBinding="parentProp2">අතර
   scope: { interpolatedProp: '@interpolated', twowayBindingProp: '=twowayBinding' }
   , විධානය එහි සම්බන්ධක කාර්යයේදී මෙය කරයි යැයි උපකල්පනය කරන්න: scope.someIsolateProp = "I'm isolated"
   
   හුදකලා විෂය පථයන් පිළිබඳ වැඩි විස්තර සඳහා http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/ බලන්න.
4. transclude: true- විධානය මඟින් නව "සම්ප්‍රේෂණය කළ" ළමා විෂය පථයක් නිර්මාණය කරයි, එය මූලාකෘතිමය වශයෙන් මව් විෂය පථයෙන් උරුම වේ. සම්ප්‍රේෂණය කරන ලද සහ හුදකලා වූ විෂය පථය (ඇත්නම්) සහෝදර සහෝදරියන් වේ - each සෑම විෂය පථයකම මව් දේපල එකම මාපිය විෂය පථය සඳහන් කරයි. සංක්‍රාන්ති හා හුදකලා විෂය පථය යන දෙකම පවතින විට, විෂය පථය හුදකලා කරන්න $$ ඊළඟ සිබ්ලින් විසින් සම්ප්‍රේෂණය කළ විෂය පථය සඳහන් කරයි. සම්ප්‍රේෂණය කළ විෂය පථය සමඟ කිසිදු සූක්ෂ්මතාවයක් ගැන මම නොදනිමි.
   පහත පින්තූරය සඳහා, මෙම එකතු කිරීම සමඟ ඉහත සඳහන් විධානයම උපකල්පනය කරන්න:transclude: true
   

මෙම පත්වීමට විජේතුංග සතුව showScope()ක හුදෙකලා හා ලෙසින් විෂය පථය පරීක්ෂා කිරීම සඳහා භාවිතා කළ හැකි බව උත්සවය. ෆෙඩෙල් හි අදහස් දැක්වීම්වල උපදෙස් බලන්න.

සාරාංශය

විෂය පථයන් හතරක් ඇත:

1. සාමාන්‍ය මූලාකෘති විෂය පථයේ උරුමය - ng-include, ng-switch, ng-controller, directive with scope: true
2. පිටපතක් / පැවරුමක් සහිත සාමාන්‍ය මූලාකෘති විෂය පථයේ උරුමය - නැවත නැවත කරන්න. සෑම පුනරාවර්තනයක්ම නව ළමා විෂය පථයක් නිර්මාණය කරන අතර, නව ළමා විෂය පථයට සෑම විටම නව දේපලක් ලැබේ.
3. හුදකලා විෂය පථය - සමඟ නියෝග scope: {...}. මෙය මූලාකෘති නොවේ, නමුත් '=', '@' සහ '&' ගුණාංග හරහා මව් විෂය පථයට ප්‍රවේශ වීමට යාන්ත්‍රණයක් සපයයි.
4. සම්ප්‍රේෂණය කළ විෂය පථය - සමඟ විධානය transclude: true. මෙය සාමාන්‍ය මූලාකෘති විෂය පථයේ උරුමයකි, නමුත් එය ඕනෑම හුදකලා විෂය පථයක සහෝදර සහෝදරියකි.

සියළුම විෂය පථයන් සඳහා (මූලාකෘති හෝ නොවේ), කෝණික සෑම විටම මවු-දරු සම්බන්ධතාවය (එනම් ධූරාවලියක්), දේපල $ දෙමව්පියන් සහ $$ ළමා හෙඩ් සහ $$ ළමා ටේල් හරහා නිරීක්ෂණය කරයි.

සමඟ රූප සටහන් ජනනය කරන ලදි graphvizgithub හි ඇති "* .dot" ගොනු . ටිම් කැස්වෙල්ගේ “ වස්තු ප්‍රස්තාර සමඟ ජාවාස්ක්‍රිප්ට් ඉගෙනීම ” යනු රූප සටහන් සඳහා ග්‍රැෆ්විස් භාවිතා කිරීමට ආභාසය විය.

මාක්ගේ පිළිතුර සමඟ තරඟ කිරීමට මට කිසිසේත් අවශ්‍ය නැත, නමුත් ජාවාස්ක්‍රිප්ට් උරුමයට සහ එහි මූලාකෘති දාමයට අළුත් කෙනෙකු ලෙස අවසානයේ සියල්ල ක්ලික් කළ කොටස ඉස්මතු කිරීමට අවශ්‍ය විය .

දේපල පමණක් කියවන්නේ මූලාකෘති දාමය සෙවීම මිස ලිවීම නොවේ. එබැවින් ඔබ සැකසූ විට

myObject.prop = '123';

එය දම්වැල දෙස බලන්නේ නැත, නමුත් ඔබ සැකසූ විට

myObject.myThing.prop = '123';

එම ලිවීමේ මෙහෙයුම තුළ සියුම් කියවීමක් සිදුවෙමින් පවතින අතර එය මගේ මුක්කු ලිවීමට පෙර මගේ දේ සොයා බැලීමට උත්සාහ කරයි. ඒ නිසාම දරුවාගෙන් object.properties වෙත ලිවීම දෙමව්පියන්ගේ වස්තූන් වෙත ලැබේ.

ජාවාස්ක්‍රිප්ට් සමඟ මූලාකෘති උරුමය පිළිබඳ උදාහරණයක් @ ස්කොට් ඩ්‍රිස්කොල් පිළිතුරට එක් කිරීමට මම කැමතියි. අපි එක්මාස්ක්‍රිප්ට් 5 පිරිවිතරයේ කොටසක් වන Object.create () සමඟ සම්භාව්‍ය උරුම රටාව භාවිතා කරන්නෙමු.

පළමුව අපි "දෙමාපිය" වස්තු ශ්‍රිතය නිර්මාණය කරමු

function Parent(){

}

ඉන්පසු "දෙමාපිය" වස්තු ශ්‍රිතයට මූලාකෘතියක් එක් කරන්න

 Parent.prototype = {
 primitive : 1,
 object : {
    one : 1
   }
}

"ළමා" වස්තු ශ්‍රිතය සාදන්න

function Child(){

}

ළමා මූලාකෘතිය පවරන්න (ළමා මූලාකෘතිය මව් මූලාකෘතියෙන් උරුම කර ගන්න)

Child.prototype = Object.create(Parent.prototype);

නිසි "ළමා" මූලාකෘති සාදන්නා පත් කරන්න

Child.prototype.constructor = Child;

ළමා මූලාකෘතියකට "changeProps" ක්‍රමය එක් කරන්න, එය ළමා වස්තුවෙහි "ප්‍රාථමික" දේපල වටිනාකම නැවත ලියන අතර ළමා හා දෙමාපිය වස්තු දෙකෙහිම "object.one" අගය වෙනස් කරයි.

Child.prototype.changeProps = function(){
    this.primitive = 2;
    this.object.one = 2;
};

දෙමාපිය (තාත්තා) සහ ළමා (පුතා) වස්තු ආරම්භ කරන්න.

var dad = new Parent();
var son = new Child();

ළමා (පුතා) changeProps ක්‍රමය අමතන්න

son.changeProps();

ප්‍රති .ල පරීක්ෂා කරන්න.

දෙමාපිය ප්‍රාථමික දේපල වෙනස් නොවීය

console.log(dad.primitive); /* 1 */

ළමා ප්‍රාථමික දේපල වෙනස් කර ඇත (නැවත ලිවීම)

console.log(son.primitive); /* 2 */

දෙමාපිය සහ ළමා object.one ගුණාංග වෙනස් විය

console.log(dad.object.one); /* 2 */
console.log(son.object.one); /* 2 */

මෙහි වැඩ කරන උදාහරණය http://jsbin.com/xexurukiso/1/edit/

Object.create පිළිබඳ වැඩි විස්තර මෙතැනින් https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/create