AngularJS හි $ විෂය පථය $ ඔරලෝසුව සහ $ විෂය පථය use භාවිතා කරන්නේ කෙසේද?


1091

මම භාවිතා කරන ආකාරය වටහා ගන්නේ නැත $scope.$watchහා $scope.$apply. නිල ලියකියවිලි ප්‍රයෝජනවත් නොවේ.

මට විශේෂයෙන් නොතේරෙන දේ:

  • ඒවා DOM හා සම්බන්ධද?
  • මාදිලියට DOM වෙනස්කම් යාවත්කාලීන කරන්නේ කෙසේද?
  • ඔවුන් අතර සම්බන්ධතා ලක්ෂ්‍යය කුමක්ද?

මම උත්සාහ කළා , මෙම නිබන්ධනය , නමුත් එය අවබෝධ ගනී $watchසහ $applyලබා සඳහා.

කුමක් කළ යුතුද $applyසහ $watchකරන්නේද, ඒවා නිසි ලෙස භාවිතා කරන්නේ කෙසේද?

Answers:


1743

එය තේරුම් ගැනීම සඳහා AngularJS ක්‍රියා කරන ආකාරය පිළිබඳව ඔබ දැනුවත් විය යුතුය.

ඩයිජෙස්ට් චක්‍රය සහ $ විෂය පථය

පළමුවෙන්ම හා ප්‍රධාන වශයෙන් AngularJS විසින් ඊනියා ඩයිජෙස්ට් චක්‍රයේ සංකල්පයක් අර්ථ දක්වයි . මෙම චක්‍රය ලූපයක් ලෙස සැලකිය හැකි අතර, ඒ අතරතුර AngularJS විසින් සියළුම s විසින් නරඹන ලද සියලු විචල්‍යයන්හි යම් වෙනසක් තිබේදැයි පරීක්ෂා කරයි $scope. එබැවින් ඔබ $scope.myVarඔබේ පාලකයේ අර්ථ දක්වා ඇති අතර මෙම විචල්‍යය නැරඹීම සඳහා සලකුණු කර ඇත්නම්, එවිට ඔබ ඇඟවුම් කරන්නේ AngularJS හි සිදුවන වෙනස්කම් නිරීක්ෂණය කරන ලෙසයිmyVar ලූපයේ එක් එක් පුනරාවර්තනයේ .

ස්වාභාවික පසු විපරම් ප්‍රශ්නයක් වනුයේ: සියල්ල $scopeනැරඹීමට බැඳී තිබේද? වාසනාවකට මෙන්, නැත. ඔබගේ සෑම වස්තුවකම වෙනස්කම් සඳහා ඔබ බලා සිටින්නේ නම් $scope, ඉක්මණින් ඩයිජෙස්ට් ලූපයක් ඇගයීමට වයස් ගත වන අතර ඔබ ඉක්මනින් කාර්ය සාධන ගැටළු වලට මුහුණ දෙනු ඇත. AngularJS කණ්ඩායම අපට යම් $scopeවිචල්‍යයක් නැරඹිය හැකි යැයි ප්‍රකාශ කිරීමට ක්‍රම දෙකක් ලබා දුන්නේ එබැවිනි (පහත කියවන්න).

$ ඔරලෝසුව සවන් දීමට උපකාරී වේ $ විෂය පථයේ වෙනස්කම්

$scopeවිචල්‍යයක් නැරඹිය හැකි යැයි ප්‍රකාශ කිරීමට ක්‍රම දෙකක් තිබේ .

  1. ප්‍රකාශනය හරහා එය ඔබගේ අච්චුවේ භාවිතා කිරීමෙන් <span>{{myVar}}</span>
  2. එය අතින් එකතු කිරීමෙන් $watchසේවාව

දැන්වීම 1) මෙය වඩාත් සුලභ සිදුවීමක් වන අතර ඔබ එය මීට පෙර දැක ඇති බව මට විශ්වාසයි, නමුත් මෙය පසුබිමේ ඔරලෝසුවක් නිර්මාණය කර ඇති බව ඔබ දැන සිටියේ නැත. ඔව්, එය තිබුණා! AngularJS විධානයන් භාවිතා කිරීම (වැනි ng-repeat) ද ව්‍යාජ ඔරලෝසු නිර්මාණය කළ හැකිය.

දැන්වීම 2) ඔබ ඔබේම ඔරලෝසු සාදන ආකාරය මෙයයි . $watchයම් අගයක් අමුණා ඇති විට යම් කේතයක් ධාවනය කිරීමට සේවාව ඔබට උපකාරී $scopeවේ. එය කලාතුරකින් භාවිතා වන නමුත් සමහර විට එය ප්‍රයෝජනවත් වේ. උදාහරණයක් ලෙස, 'myVar' වෙනස් වන සෑම අවස්ථාවකම ඔබට යම් කේතයක් ධාවනය කිරීමට අවශ්‍ය නම්, ඔබට පහත සඳහන් දෑ කළ හැකිය:

function MyController($scope) {

    $scope.myVar = 1;

    $scope.$watch('myVar', function() {
        alert('hey, myVar has changed!');
    });

    $scope.buttonClicked = function() {
        $scope.myVar = 2; // This will trigger $watch expression to kick in
    };
}

$ අයදුම් කිරීමෙන් ඩයිජෙස්ට් චක්‍රය සමඟ වෙනස්කම් ඒකාබද්ධ කිරීමට හැකියාව ලැබේ

$applyක්‍රියාකාරීත්වය ඒකාබද්ධ කිරීමේ යාන්ත්‍රණයක් ලෙස ඔබට සිතිය හැකිය . ඔබ දකින සෑම අවස්ථාවකම ඔබ නැරඹූ විචල්‍යය වෙනස් කර ඇත$scope වස්තුවට කෙලින්ම ඔරලෝසුවක් , වෙනස සිදුවී ඇති බව AngularJS දැන ගනු ඇත. එයට හේතුව AngularJS දැනටමත් එම වෙනස්කම් නිරීක්ෂණය කිරීමට දැන සිටි බැවිනි. එබැවින් එය රාමුව මඟින් කළමනාකරණය කරන කේතයකින් සිදුවුවහොත්, ඩයිජෙස්ට් චක්‍රය දිගටම කරගෙන යනු ඇත.

කෙසේ වෙතත්, සමහර විට ඔබට AngularJS ලෝකයෙන් පිටත යම් අගයක් වෙනස් කිරීමට අවශ්‍ය වන අතර වෙනස්කම් සාමාන්‍යයෙන් ව්‍යාප්ත වේ. මෙය සළකා බලන්න - ඔබට $scope.myVarවටිනාකමක් ඇති අතර එය jQuery $.ajax()හසුරුවන්නෙකු තුළ වෙනස් කරනු ඇත . මෙය අනාගතයේ යම් අවස්ථාවක සිදුවනු ඇත. AngularJS හට මෙය සිදුවන තෙක් බලා සිටිය නොහැක, මන්ද එය jQuery හි රැඳී සිටීමට උපදෙස් දී නොමැත.

මෙය විසඳීම $applyසඳහා හඳුන්වා දී ඇත. ආහාර ජීර්ණ චක්‍රය පැහැදිලිවම ආරම්භ කිරීමට එය ඔබට ඉඩ සලසයි. කෙසේ වෙතත්, ඔබ මෙය භාවිතා කළ යුත්තේ සමහර දත්ත AngularJS වෙත සංක්‍රමණය කිරීම සඳහා පමණි (වෙනත් රාමු සමඟ ඒකාබද්ධ කිරීම), නමුත් කිසි විටෙකත් සාමාන්‍ය AngularJS කේතය සමඟ ඒකාබද්ධව මෙම ක්‍රමය භාවිතා නොකරන්න, මන්ද AngularJS එවිට දෝෂයක් ඇති කරයි.

මේ සියල්ල DOM හා සම්බන්ධ වන්නේ කෙසේද?

හොඳයි, ඔබ නැවත වරක් නිබන්ධනය අනුගමනය කළ යුතුය, දැන් ඔබ මේ සියල්ල දනී. $scopeකිසිවක් වෙනස් නොවන තාක් කල් සියල්ලටම අනුයුක්ත කර ඇති සෑම මුරකරුවෙකුම තක්සේරු කිරීමෙන් UI සහ JavaScript කේතය සමමුහුර්තව පවතින බව ඩයිජෙස්ට් චක්‍රය සහතික කරයි . ඩයිජෙස්ට් ලූපයේ තවත් වෙනස්කම් සිදු නොවන්නේ නම්, එය අවසන් යැයි සැලකේ.

ඔබ වෙත වස්තූන් අනුයුක්ත හැකි $scopeපාලක, හෝ ඔවුන් ප්රකාශ කරමින් එක්කෝ සුවිශේෂව වස්තුව {{expression}}මතය කෙලින්ම පත්රය.

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

වැඩිදුර කියවීම්:


57
"සියලුම $ විෂය පථයන්ට අනුයුක්ත කර ඇති සියලුම විචල්‍යයන්හි යම් වෙනසක් තිබේදැයි කෝණික පරීක්‍ෂා කිරීම" - එය නිවැරදි යැයි මම නොසිතමි. මම විශ්වාස කරන්නේ කෝණික පමණක් (අපිරිසිදු) චෙක්පත් $ ඔරලෝසු සකසා ඇති විෂය පථ ගුණාංග (view {} view දර්ශනයක් භාවිතා කිරීමෙන් ස්වයංක්‍රීයව $ ඔරලෝසුවක් නිර්මාණය වන බව සලකන්න). මත කොටසක් "විෂය පථය $ ඔරලෝසුවක් කාර්ය සාධන සලකා බැලිය යුතු කරුණු" ද බලන්න විෂය පථය පිටුව .
මාර්ක් රාජ්කොක්

5
එය එසේ විය හැකිය. මම ඒ ගැන වැඩිදුර කියවීමට සහ මගේ පිළිතුර සංස්කරණය කිරීමට යම් කාලයක් සොයා ගැනීමට උත්සාහ කරමි.
ŁukaszBachman

15
Ark මාක්රාජ්කොක්, ඔබ හරි. මම මගේ පිළිතුර වෙනස් කර මෙය ක්‍රියාත්මක කරන ආකාරය මනාව පෙන්වන ලිපියකට යොමු කළෙමි.
ŁukaszBachman

3
මෙය භාවිතා කිරීම ගැන කුමක් කිව හැකිද? ("පාලනය ලෙස" ක්‍රමය)
ලියාන්ඩ්‍රෝ

2
"පාලනය ලෙස" භාවිතා කිරීම ඉහත තොරතුරු වලට කිසිදු බලපෑමක් නොකළ යුතුය. This.myVar භාවිතා කිරීමෙන් myVar විෂය පථයට ඇතුළත් වේ.
මාකස් රොඩෙල්

161

AngularJS හි, අපි අපගේ ආකෘති යාවත්කාලීන කරන අතර, අපගේ අදහස් / සැකිලි DOM “ස්වයංක්‍රීයව” යාවත්කාලීන කරයි (සාදන ලද හෝ අභිරුචි නියෝග හරහා).

$ අයදුම් කිරීම සහ $ ඔරලෝසුව යන දෙකම විෂය පථ ක්‍රම වන අතර ඒවා DOM හා සම්බන්ධ නොවේ.

මෙම සංකල්ප පිටුව (කොටසක් "ධාවන"), ඔබ විසින් $ ජීර්ණය පුඩුවක් $ අදාළ, ඔබ විසින් $ evalAsync පෝලිමේ හා $ ඔරලෝසුවක් ලැයිස්තුව ඉතා හොඳ පැහැදිලි කිරීමක් තිබෙනවා. පෙළ සමඟ එන පින්තූරය මෙන්න:

$ ඩයිජෙස්ට් ලූපය

ඕනෑම කේතයකට විෂය පථයකට ප්‍රවේශය ඇත - සාමාන්‍යයෙන් පාලකයන් සහ විධානයන් (ඒවායේ සම්බන්ධක ක්‍රියාකාරකම් සහ / හෝ ඔවුන්ගේ පාලකයන්) - AngularJS විසින් එම විෂය පථයට එරෙහිව ඇගයීමට ලක් කරන “ ඔරලෝසු ප්‍රකාශනයක් ” සැකසිය හැකිය . AngularJS එහි $ ඩයිජෙස්ට් ලූපයට ඇතුළු වන සෑම විටම මෙම ඇගයීම සිදු වේ (විශේෂයෙන් "$ ඔරලෝසු ලැයිස්තුව" ලූපය). ඔබට තනි විෂය පථ ගුණාංග නැරඹිය හැකිය, ඔබට ගුණාංග දෙකක් එකට නැරඹීම සඳහා ශ්‍රිතයක් අර්ථ දැක්විය හැකිය, ඔබට අරාවක දිග නැරඹිය හැකිය.

"AngularJS ඇතුළත" දේවල් සිදු වූ විට - උදා: ඔබ AngularJS ද්වි-මාර්ග දත්ත සමුදාය සක්‍රීය කර ඇති පෙළ කොටුවකට ටයිප් කරන්න (එනම්, ng-model භාවිතා කරයි), $ http ඇමතුම් ආපසු ගින්නක් යනාදිය - $ අයදුම් කිරීම දැනටමත් කැඳවා ඇත, එබැවින් අපි ඉහත රූපයේ "AngularJS" සෘජුකෝණාස්රය තුළ ඇත. සියලුම ඔරලෝසු ප්‍රකාශන ඇගයීමට ලක් කෙරේ (සමහර විට එක් වරකට වඩා - වැඩිදුර වෙනස්කම් අනාවරණය නොවන තුරු).

"AngularJS වලින් පිටත" දේවල් සිදු වූ විට - උදා: ඔබ විධානයකින් බන්ධනය () භාවිතා කළ අතර පසුව එම සිදුවීම ගිනි ගනී, එහි ප්‍රති your ලයක් ලෙස ඔබේ ඇමතුම කැඳවනු ලැබේ, නැතහොත් සමහර jQuery ලියාපදිංචි කළ ඇමතුම් ආපසු ගින්නක් - අපි තවමත් "ස්වදේශීය" සෘජුකෝණාස්රයේ සිටිමු. ඇමතුම් ලබා ගැනීමේ කේතය ඕනෑම $ ඔරලෝසුවක් නරඹන ඕනෑම දෙයක් වෙනස් කරන්නේ නම්, කෝණය $ කෝණික JS සෘජුකෝණාස්රයට ඇතුළු වීමට $ ඩයිජෙස්ට් ලූපය ක්‍රියාත්මක වීමට හේතු වන අතර එම නිසා AngularJS වෙනස දැක එහි මැජික් ක්‍රියා කරයි.


5
මට අදහස තේරෙනවා, මට තේරෙන්නේ නැති දෙය නම් දත්ත සැබවින්ම මාරු වන්නේ කෙසේද යන්නයි. මා සතුව ආකෘතියක් ඇත, එය දත්ත විශාල ප්‍රමාණයක් ඇති වස්තුවකි, මම එයින් සමහරක් DOM හැසිරවීමට භාවිතා කරමි. එවිට සමහර ඒවා වෙනස් වේ. වෙනස් කළ දත්ත නිවැරදි ස්ථානයේ ආකෘතියේ තබන්නේ කෙසේද? මා භාවිතා කළ උදාහරණයේ දී ඔහු හැසිරවීම සිදු කරන අතර අවසානයේ සරලව භාවිතා කරයි scope.$apply(scope.model), දත්ත හුවමාරු වන්නේ කුමක් ද යන්න මට නොතේරේ. එය ආකෘතියේ නියම ස්ථානයට මාරු කරන්නේ කෙසේද?
ilyo

6
ඉන්ද්‍රජාලික දත්ත හුවමාරුවක් සිදු නොවේ. සාමාන්‍යයෙන් කෝණික යෙදුම් සමඟ, ඔබ කෝණික ආකෘති වෙනස් කළ යුතු අතර එමඟින් දර්ශනය / DOM යාවත්කාලීන කිරීම් සිදු වේ. ඔබ කෝණිකයෙන් පිටත DOM යාවත්කාලීන කරන්නේ නම්, ඔබට ආකෘති අතින් යාවත්කාලීන කළ යුතුය. scope.$apply(scope.model)සරලවම scope.modelකෝණික ප්‍රකාශනයක් ලෙස තක්සේරු කර $ ඩයිජෙස්ට් ලූපයක් ඇතුළත් කරයි. ඔබ සඳහන් කරන ලිපියේ, scope.$apply()ආකෘතිය දැනටමත් $ සෝදිසියෙන් සිටින බැවින්, එය ප්‍රමාණවත් වනු ඇත. නැවතුම් () ශ්‍රිතය ආකෘතිය යාවත්කාලීන කිරීමකි (මම විශ්වාස කරන්නේ යාවත්කාලීන කිරීම විෂය පථයට යොමුවකි), ඉන්පසු $ අයදුම් කිරීම හැඳින්වේ.
මාර්ක් රාජ්කොක්

මෙම පිළිතුර යටතේ AngularJS ලියකියවිලි මාරු වී ඇති බව පෙනේ (පළමු සබැඳියට "ධාවන කාලය" හෝ $watchපිටුවේ නොමැත, දෙවන සබැඳිය කැඩී ඇත - මේ වන විට කෙසේ හෝ වේවා ). වේදනාකාරී ලෙස, සංරක්ෂිත අනුවාදයන් අන්තර්ගතය නිර්මාණය කළ අසමමුහුර්ත ක්‍රියාවලියක් හැඹිලිගත කර නැත.
රෆින්

52

AngularJS මෙම ව්යාප්ත සිදුවීම් පුඩුවක් ලෙස හඳුන්වන දෙයක් නිර්මාණය, AngularJS context.

$ ඔරලෝසුව ()

ඔබ UI යමක් බැඳ සෑම අවස්ථාවකදීම ඔබ ඇතුල් $watchදී $watchලැයිස්තුව .

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

මෙන්න අපට ඇති $scope.userඅතර එය පළමු ආදානයට $scope.passබැඳී ඇති අතර දෙවන එක සමඟ බැඳී ඇත. මෙය කිරීමෙන් අපි ලැයිස්තුවට $watchඑස්$watch දෙකක් එකතු කරමු .

අපගේ අච්චුව පටවන විට, සම්බන්ධක අවධියේදී AKA, සම්පාදකයා සෑම විධානයක්ම සොයා බලා අවශ්‍ය සියලු $watches නිර්මාණය කරයි .

AngularJS සපයයි $watch, $watchcollectionසහ $watch(true). පහත දැක්වෙන්නේ මුරකරුවන්ගෙන් ලබාගත් කරුණු තුනම ගැඹුරින් විස්තර කරන පිළිවෙලකි .

රූප විස්තරය මෙහි ඇතුළත් කරන්න

angular.module('MY_APP', []).controller('MyCtrl', MyCtrl)
function MyCtrl($scope,$timeout) {
  $scope.users = [{"name": "vinoth"},{"name":"yusuf"},{"name":"rajini"}];

  $scope.$watch("users", function() {
    console.log("**** reference checkers $watch ****")
  });

  $scope.$watchCollection("users", function() {
    console.log("**** Collection  checkers $watchCollection ****")
  });

  $scope.$watch("users", function() {
    console.log("**** equality checkers with $watch(true) ****")
  }, true);

  $timeout(function(){
     console.log("Triggers All ")
     $scope.users = [];
     $scope.$digest();

     console.log("Triggers $watchCollection and $watch(true)")
     $scope.users.push({ name: 'Thalaivar'});
     $scope.$digest();

     console.log("Triggers $watch(true)")
     $scope.users[0].name = 'Superstar';
     $scope.$digest();
  });
}

http://jsfiddle.net/2Lyn0Lkb/

$digest ලූප්

AngularJS සන්දර්භය මඟින් කළමනාකරණය කළ හැකි සිදුවීමක් බ්‍රව්සරයට ලැබුණු විට, $digestලූපය ඉවත් කරනු ලැබේ. මෙම ලූපය කුඩා ලූප දෙකකින් සාදා ඇත. එකක් $evalAsyncපෝලිම් සැකසෙන අතර අනෙක ක්‍රියාවට නංවයි $watch list. මෙම $digestලැයිස්තුව හරහා කැමැත්ත පුඩුවක් $watchඇති බව අපි

app.controller('MainCtrl', function() {
  $scope.name = "vinoth";

  $scope.changeFoo = function() {
      $scope.name = "Thalaivar";
  }
});

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

මෙහි අපට ඇත්තේ එකක් පමණි, $watchමන්ද ng-click කිසිදු ඔරලෝසුවක් නිර්මාණය නොකරයි.

අපි බොත්තම ඔබන්න.

  1. AngularJS සන්දර්භයට ඇතුළු වන සිදුවීමක් බ්‍රව්සරයට ලැබේ
  2. මෙම $digestලූපය ක්රියාත්මක වන අතර වෙනස්කම් සඳහා සෑම $ ඔරලෝසුවක් ඉල්ලා සිටිනු ඇත.
  3. සිට $watch$ scope.name වල වෙනස්කම් ඇති කිරීම සඳහා බලා කරන ලද වෙනස් වාර්තා, එය තවත් බල කරනු ඇත $digestපුඩුවක්.
  4. නව ලූපය කිසිවක් වාර්තා නොකරයි.
  5. බ්‍රව්සරය නැවත පාලනය ලබා ගන්නා අතර එය $ scope.name හි නව අගය පිළිබිඹු කරමින් DOM යාවත්කාලීන කරනු ඇත
  6. මෙහි ඇති වැදගත් දෙය නම් AngularJS සන්දර්භයට ඇතුළු වන සෑම සිදුවීමක්ම $digestලූපයක් ධාවනය කිරීමයි . ඒ කියන්නේ අපි ආදානයකින් ලිපියක් ලියන සෑම අවස්ථාවකම, $watchමෙම පිටුවේ ඇති සෑම දෙයක්ම පරීක්ෂා කර බැලීමට ලූපය ක්‍රියාත්මක වේ.

$ අයදුම් කරන්න ()

යම් $applyසිදුවීමක් වෙඩි තැබූ විට ඔබ අමතන්නේ නම් , එය කෝණික සන්දර්භය හරහා ගමන් කරනු ඇත, නමුත් ඔබ එය නොකියන්නේ නම්, එය එයින් පිටත ධාවනය වේ. එය එතරම් පහසු ය. අභ්‍යන්තරව ලූපය $applyඅමතනු ඇති$digest() අතර එය අලුතින් යාවත්කාලීන කළ අගය සමඟ DOM යාවත්කාලීන කර ඇති බව සහතික කිරීම සඳහා සියලු ඔරලෝසු හරහා නැවත ක්‍රියා කරයි.

මෙම $apply()ක්‍රමය මඟින් මුළු දාමයේම මුරකරුවන් අවුලුවනු $scopeඇති අතර එම $digest()ක්‍රමය මඟින් ධාරාව $scopeසහ එහි ධාරාව පමණක් නරඹන්නන් අවුලුවනු ඇත children. ඉහළට එන $scopeවස්තූන් කිසිවක් දේශීය වෙනස්කම් ගැන දැන ගැනීමට අවශ්‍ය නොවන විට, ඔබට භාවිතා කළ හැකිය $digest().


18

මම ඉතා ගැඹුරු වීඩියෝ ප්රමාණයක් ආවරණය සොයා $watch, $apply, $digestසහ චක්ර ජීර්ණය:

සංකල්ප පැහැදිලි කිරීම සඳහා එම වීඩියෝවල භාවිතා කරන විනිවිදක කිහිපයක් පහත දැක්වේ (ඉහත සබැඳි ඉවත් කර ඇත්නම් / ක්‍රියා නොකරන්නේ නම්).

රූප විස්තරය මෙහි ඇතුළත් කරන්න

ඉහත රූපයේ, "$ scope.c" එය කිසිදු දත්ත බන්ධනයක (සලකුණු කිරීමේදී) භාවිතා නොකරන බැවින් එය නරඹන්නේ නැත. අනෙක් දෙක ( $scope.aසහ $scope.b) නරඹනු ඇත.

රූප විස්තරය මෙහි ඇතුළත් කරන්න

ඉහත රූපයෙන්: අදාළ බ්‍රව්සර් සිදුවීම මත පදනම්ව, AngularJS විසින් සිද්ධිය ග්‍රහණය කරගනී, ඩයිජෙස්ට් චක්‍රය සිදු කරයි (වෙනස්කම් සඳහා සියලු ඔරලෝසු හරහා යයි), ඔරලෝසු ක්‍රියාකාරකම් ක්‍රියාත්මක කර DOM යාවත්කාලීන කරන්න. බ්‍රව්සර් සිදුවීම් නොවේ නම්, ඩයිජෙස්ට් චක්‍රය අතින් $applyහෝ අවුලුවන $digest.

ගැන $applyසහ $digest:

රූප විස්තරය මෙහි ඇතුළත් කරන්න


17

ඇත $watchGroupසහ $watchCollectionමෙන්ම. $watchGroupඩොම් වස්තුවක් නොවන දර්ශනයක බහු ගුණාංග ඇති වස්තුවක් යාවත්කාලීන කිරීම සඳහා ශ්‍රිතයක් කැඳවීමට ඔබට අවශ්‍ය නම් , විශේෂයෙන් උපකාරී වේ, උදා: කැන්වස් හි තවත් දර්ශනයක්, WebGL හෝ සේවාදායක ඉල්ලීමෙහි .

මෙන්න, ප්‍රලේඛන සබැඳිය .


මම ඒ ගැන අදහස් දක්වන්නට $watchCollectionතිබුනද ඔබ දැනටමත් කර ඇති බව මට පෙනේ. මෙන්න AngularJS වෙබ් අඩවියෙන් ඒ පිළිබඳ ලියකියවිලි . ඔවුන් $watchගැඹුර පිළිබඳ ඉතා ලස්සන දර්ශනයක් සපයයි . තොරතුරු පිටුවේ පහළට ආසන්නයේ ඇති බව සලකන්න.
JabberwockyDecompiler

15

ඉහත සඳහන් සියල්ල කියවීම අවසන් කරන්න, කම්මැලි සහ නිදිමත (සමාවෙන්න, නමුත් සත්‍යය). ඉතා තාක්ෂණික, ගැඹුරු, සවිස්තරාත්මක හා වියලි. මා ලියන්නේ ඇයි? AngularJS අති විශාල බැවින්, අන්තර් සම්බන්ධිත සංකල්ප රාශියක් ඕනෑම කෙනෙකුට නීරස විය හැකිය. මම බොහෝ විට මගෙන්ම ඇසුවෙමි, ඒවා තේරුම් ගැනීමට තරම් මා දක්ෂ නොවේද? නැත! එයට හේතුව තාක්‍ෂණය සඳහා ඩම්මි භාෂාවකින් තාක්‍ෂණය පැහැදිලි කළ හැක්කේ ස්වල්ප දෙනෙකුට පමණි . හරි, මට උත්සාහ කිරීමට ඉඩ දෙන්න:

1) ඒවා සියල්ලම සිදුවීම් මත පදනම් වූ දේවල් ය. (මට සිනහව ඇසේ, නමුත් කියවන්න)

සිදුවීම මත පදනම් වූ දේ කුමක්දැයි ඔබ නොදන්නේ නම්, ඔබ පිටුවේ බොත්තමක් තබන්නැයි සිතන්න, එය "ක්ලික් කිරීම" භාවිතයෙන් w / ශ්‍රිතයක් සම්බන්ධ කරන්න, ඔබ තුළ සිටුවන ක්‍රියාවන් අවුලුවාලීමට පරිශීලකයින් එය මත ක්ලික් කරන තෙක් බලා සිටින්න. ශ්‍රිතය. නැතහොත් SQL Server / Oracle හි "ප්‍රේරකය" ගැන සිතන්න.

2) $ ඔරලෝසුව "ක්ලික් කිරීම" වේ.

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

3) $ ඩයිජෙස්ට් යනු වෙහෙස නොබලා පරික්ෂා කරන ලොක්කා , බ්ලා-බ්ලා-බ්ලා, නමුත් හොඳ ලොක්කෙකි.

4) $ අයදුම් කිරීම මඟින් ඔබට එය අතින් කිරීමට අවශ්‍ය වූ විට එය අසාර්ථක-සාධනය වැනි ක්‍රමයක් ලබා දෙයි (ක්ලික් කිරීම ආරම්භ නොවන්නේ නම්, ඔබ එය ක්‍රියාත්මක කිරීමට බල කරයි.)

දැන් අපි එය දෘශ්‍යමාන කරමු. අදහස ග්‍රහණය කර ගැනීම වඩාත් පහසු කිරීම සඳහා මෙය සිතන්න:

අවන්හලක,

- වේටර්වරු

ගනුදෙනුකරුවන්ගෙන් ඇණවුම් ලබා ගත යුතුය, මෙය

$watch(
  function(){return orders;},
  function(){Kitchen make it;}
);

- කළමනාකරු සියළුම වේටර්වරුන් අවදියෙන් සිටින බවට වග බලා ගැනීම සඳහා දුවමින් සිටී, ගනුදෙනුකරුවන්ගෙන් සිදුවන ඕනෑම වෙනස් සං sign ාවකට ප්‍රතිචාර දක්වයි. මෙය$digest()

- ඉල්ලීම මත සෑම කෙනෙකුම තල්ලු කිරීමේ අවසාන බලය හිමිකරුට ඇත, මෙයයි$apply()


2
අවුරුදු 5 ක දරුවෙකුට මෙය තේරුම් ගත හැකිය. මම මේ ආකාරයේ පිළිතුරක් අගය කරමි. +1
ක්‍රිස් 22
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.