AngularJS: දෝෂය වළක්වා ගන්න $ විෂය පථය අමතන විට දැනටමත් ක්‍රියාත්මක වෙමින් පවතී. අයදුම් කරන්න ()

කෝණික ආකාරයකින් යෙදුමක් තැනූ දා සිට මගේ පිටුව මගේ විෂය පථයට යාවත්කාලීන කිරීමට අවශ්‍ය බව මම සොයා ගතිමි.

මෙය කිරීමට මා දන්නා එකම ක්‍රමය $apply()වන්නේ මගේ පාලකයන්ගේ සහ නියෝගයන්ගේ විෂය පථයෙන් ඇමතීමයි. මෙහි ඇති ගැටළුව නම් එය කියවන කොන්සෝලය වෙත දෝෂයක් විසි කිරීමයි:

දෝෂය: dig දැනටමත් ජීර්ණය වෙමින් පවතී

මෙම දෝෂය වළක්වා ගැනීමට හෝ එකම දේ වෙනස් ආකාරයකින් වෙනස් කර ගැනීමට යමෙක් දන්නවාද?

මෙම රටාව භාවිතා නොකරන්න - මෙය විසඳීමට වඩා දෝෂ ඇති කරයි. එය යමක් සවි කර ඇතැයි ඔබ සිතුවත් එය එසේ නොවීය.

පරික්ෂා කිරීමෙන් $digestඔබට දැනටමත් ප්‍රගතියක් තිබේදැයි පරීක්ෂා කළ හැකිය $scope.$$phase.

if(!$scope.$$phase) {
  //$digest or $apply
}

$scope.$$phaseආපසු "$digest"හෝ "$apply"ඇත්නම් $digestහෝ $applyසිදු වෙමින් පවතී. මෙම රාජ්‍යයන් අතර ඇති වෙනස වන්නේ $digestවර්තමාන විෂය පථයේ සහ එහි දරුවන්ගේ ඔරලෝසු $applyසැකසීම සහ සියලු විෂය පථයන්හි මුරකරුවන් සැකසීමයි.

@ Dnc253 හි කාරණයට, ඔබ ඔබ ඇමතීම $digestහෝ $applyනිතර නිතර සොයා ගන්නේ නම් , ඔබ එය වැරදියි. DOM සිදුවීමක් කෝණික සීමාවෙන් පිටත වෙඩි තැබීමක ප්‍රති the ලයක් ලෙස විෂය පථය යාවත්කාලීන කිරීමට අවශ්‍ය වූ විට මට ජීර්ණය කළ යුතු බව මට සාමාන්‍යයෙන් පෙනේ. උදාහරණයක් ලෙස, ට්විටර් බූට්ස්ට්‍රැප් මොඩලයක් සැඟවී ඇති විට. සමහර විට DOM සිදුවීම $digestක්‍රියාත්මක වන්නේ ක්‍රියාත්මක වන විටය , සමහර විට එසේ නොවේ. ඒ නිසයි මම මෙම චෙක්පත භාවිතා කරන්නේ.

කවුරුහරි දන්නවා නම් වඩා හොඳ ක්‍රමයක් දැන ගැනීමට මම කැමතියි.

අදහස් වලින්: @anddoutoi විසිනි

angular.js විරෝධී රටා

2. එසේ නොකරන්න if (!$scope.$$phase) $scope.$apply(), එයින් අදහස් වන්නේ ඔබ $scope.$apply()ඇමතුම් තොගයේ ප්‍රමාණවත් නොවන බවයි.

මෙම මාතෘකාව පිළිබඳ කෝණික පිරිමි ළමයින් සමඟ මෑතකදී කළ සාකච්ඡාවකින්: අනාගතය සනාථ කිරීමේ හේතු සඳහා, ඔබ භාවිතා නොකළ යුතුය$$phase

එය කිරීමට "නිවැරදි" මාර්ගය සඳහා එබූ විට, පිළිතුර දැනට පවතී

$timeout(function() {
  // anything you want can go here and will safely be run on the next digest.
})

ෆේස්බුක්, ගූගල් සහ ට්විටර් ඒපීඅයි විවිධ මට්ටම්වලට ඔතා ගැනීම සඳහා කෝණික සේවාවන් ලිවීමේදී මම මෑතකදී මෙය වෙතට ගියෙමි.

සේවාවක් තුළ සිට උදාහරණයක් මෙන්න. (සංක්ෂිප්තතාවය සඳහා, විචල්‍යයන් සැකසීම, එන්නත් කරන ලද $ කල් ඉකුත් වීම ආදිය - ඉතිරි සේවාව අත්හැර දමා ඇත.)

window.gapi.client.load('oauth2', 'v2', function() {
    var request = window.gapi.client.oauth2.userinfo.get();
    request.execute(function(response) {
        // This happens outside of angular land, so wrap it in a timeout 
        // with an implied apply and blammo, we're in action.
        $timeout(function() {
            if(typeof(response['error']) !== 'undefined'){
                // If the google api sent us an error, reject the promise.
                deferred.reject(response);
            }else{
                // Resolve the promise with the whole response if ok.
                deferred.resolve(response);
            }
        });
    });
});

$ කල් ඉකුත්වීම සඳහා වන ප්‍රමාද තර්කය අත්‍යවශ්‍ය නොවන අතර එය සකසා නොමැති නම් පෙරනිමියෙන් 0 ක් වනු ඇත ( $ කල් ඉකුත් වූ ඇමතුම් $ browser.defer ප්‍රමාදයක් සකසා නොමැති නම් එය පෙරනිමි 0 වේ )

ටිකක් බුද්ධිමත් නොවන, නමුත් එය කෝණික ලියන පිරිමි ළමයින්ගේ පිළිතුරයි, එබැවින් එය මට ප්‍රමාණවත්ය!

ඩයිජෙස්ට් චක්‍රය යනු සමමුහුර්ත ඇමතුමකි. එය සිදු වන තුරු එය බ්‍රව්සරයේ සිදුවීම් ලූපයට පාලනය නොකරයි. මේ සමඟ කටයුතු කිරීමට ක්‍රම කිහිපයක් තිබේ. මෙය සමඟ ගනුදෙනු කිරීමට ඇති පහසුම ක්‍රමය නම් ඉදිකරන ලද $ කල් ඉකුත්වීම භාවිතා කිරීමයි, දෙවන ක්‍රමය නම් ඔබ අවධාරනය හෝ ලොඩාෂ් භාවිතා කරන්නේ නම් (සහ ඔබ විය යුතුය), පහත සඳහන් දේ අමතන්න:

$timeout(function(){
    //any code in here will automatically have an apply run afterwards
});

හෝ ඔබට ලොඩාෂ් තිබේ නම්:

_.defer(function(){$scope.$apply();});

අපි වැඩමුළු කිහිපයක් අත්හදා බැලූ අතර, අපගේ සියලු පාලකයන්, නියෝග සහ සමහර කර්මාන්තශාලාවලට පවා root රූට්ස්කෝප් එන්නත් කිරීම අපි පිළිකුල් කළෙමු. ඉතින්, $ කල් ඉකුත් වීම සහ _.ඩෙෆර් මෙතෙක් අපගේ ප්‍රියතම විය. මෙම ක්‍රම මඟින් සාර්ථකව කෝණික ලෙස ඊළඟ සජීවිකරණ ලූපය තෙක් රැඳී සිටින ලෙස ඉල්ලා සිටින අතර එමඟින් වත්මන් විෂය පථය සහතික කෙරේ.

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

ඔබ දැනගත යුතු දේවල්

• $$phase රාමුවට පෞද්ගලික වන අතර ඒ සඳහා හොඳ හේතු තිබේ.

• $timeout(callback)වත්මන් ඩයිජෙස්ට් චක්‍රය (ඇත්නම්) සිදු වන තෙක් බලා සිටිනු ඇත, පසුව ඇමතුම ක්‍රියාත්මක කර අවසානයේ සම්පූර්ණ ලෙස ධාවනය කරන්න $apply.

• $timeout(callback, delay, false)(කෝල්බැක් ක්‍රියාත්මක කිරීමට පෙර විකල්ප ප්‍රමාදයකින්) එයම කරනු ඇත, නමුත් $applyඔබ ඔබේ කෝණික ආකෘතිය (ope විෂය පථය) වෙනස් නොකළේ නම් කාර්ය සාධනය සුරකින (තෙවන තර්කය) වෙඩි තබන්නේ නැත .

• $scope.$apply(callback)වෙනත් දේ අතර ආයාචනා කරයි, $rootScope.$digestඑයින් අදහස් වන්නේ ඔබ හුදකලා විෂය පථයක සිටියත් යෙදුමේ මූල විෂය පථය සහ එහි සියලුම දරුවන් යළිත් වරක් යලි සකසනු ඇති බවයි.

• $scope.$digest()හුදෙක් එහි ආකෘතිය දර්ශනයට සමමුහුර්ත කරනු ඇත, නමුත් ඔබේ දෙමව්පියන්ගේ විෂය පථය ජීර්ණය නොකරනු ඇත, එමඟින් ඔබේ HTML හි හුදකලා කොටසක හුදකලා විෂය පථයක් සමඟ වැඩ කිරීමේදී බොහෝ කාර්ය සාධනයන් ඉතිරි කර ගත හැකිය (බොහෝ දුරට නියෝගයකින්). $ ඩයිජෙස්ට් නැවත ඇමතුමක් ගන්නේ නැත: ඔබ කේතය ක්‍රියාත්මක කර ජීර්ණය කරන්න.

• $scope.$evalAsync(callback)angularjs 1.2 සමඟ හඳුන්වා දී ඇති අතර බොහෝ විට ඔබගේ කරදර බොහොමයක් විසඳනු ඇත. ඒ ගැන වැඩි විස්තර දැන ගැනීමට කරුණාකර අවසාන ඡේදය බලන්න.

• ඔබ එය ලබා ගන්නේ $digest already in progress errorනම්, ඔබේ ගෘහ නිර්මාණ ශිල්පය වැරදියි: එක්කෝ ඔබට ඔබේ විෂය පථය නැවත සකස් කිරීමට අවශ්‍ය නැත, නැතහොත් ඔබ එය භාර නොගත යුතුය (පහත බලන්න).

ඔබේ කේතය සැකසෙන ආකාරය

ඔබට එම දෝෂය ඇති වූ විට, ඔබ උත්සාහ කරන්නේ ඔබේ විෂය පථය දැනටමත් ක්‍රියාත්මක වෙමින් පවතින අතරතුර එය ජීර්ණය කිරීමට ය: එම අවස්ථාවේ දී ඔබේ විෂය පථයේ තත්වය ඔබ නොදන්නා බැවින්, එහි ජීර්ණය සමඟ කටයුතු කිරීමේ වගකීම ඔබ සතුව නැත.

function editModel() {
  $scope.someVar = someVal;
  /* Do not apply your scope here since we don't know if that
     function is called synchronously from Angular or from an
     asynchronous code */
}

// Processed by Angular, for instance called by a ng-click directive
$scope.applyModelSynchronously = function() {
  // No need to digest
  editModel();
}

// Any kind of asynchronous code, for instance a server request
callServer(function() {
  /* That code is not watched nor digested by Angular, thus we
     can safely $apply it */
  $scope.$apply(editModel);
});

විශාල කෝණික යෙදුමක කොටසක් වන අතර ඔබ කරන්නේ කුමක්ද සහ හුදකලා කුඩා විධානයක් මත වැඩ කරන්නේ දැයි ඔබ දන්නේ නම්, කාර්ය සාධනය සුරැකීම සඳහා $ ඒ වෙනුවට ඩයිජෙස්ට් යෙදීමට කැමති විය හැකිය.

Angularjs 1.2 සිට යාවත්කාලීන කරන්න

ඕනෑම $ විෂය පථයට නව, බලවත් ක්‍රමයක් එකතු කර ඇත : $evalAsync. මූලික වශයෙන්, එය සිදුවන්නේ නම් එය වත්මන් ඩයිජෙස්ට් චක්‍රය තුළ එහි ඇමතුම ක්‍රියාත්මක කරනු ඇත, එසේ නොමැති නම් නව ඩයිජෙස්ට් චක්‍රයක් නැවත ඇමතුම ක්‍රියාත්මක කිරීමට පටන් ගනී.

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

මෙම අවස්ථා වලදී සහ ඔබ සතුව තිබූ අනෙක් සියල්ලම !$scope.$$phaseභාවිතා කිරීමට වග බලා ගන්න$scope.$evalAsync( callback )

මෙම ක්‍රියාවලිය වියළි ලෙස තබා ගැනීමට හුරුබුහුටි කුඩා උපකාරක ක්‍රමය:

function safeApply(scope, fn) {
    (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
}

උදාහරණයක් ලෙස කෝඩ් මිරර් සහ ක්‍රපානෝ වැනි තෙවන පාර්ශවීය ස්ක්‍රිප්ට් වලද මට ඇත්තේ එකම ගැටලුවකි, මෙහි සඳහන් කර ඇති ආරක්ෂිත යෙදුම් ක්‍රම භාවිතා කිරීම පවා මට දෝෂය විසඳා නැත.

නමුත් එය විසඳා ඇත්තේ $ කල් ඉකුත් වීමේ සේවාව භාවිතා කිරීමයි (පළමුව එය එන්නත් කිරීමට අමතක නොකරන්න).

මේ අනුව, වැනි දෙයක්:

$timeout(function() {
  // run my code safely here
})

ඔබේ කේතය තුළ ඔබ භාවිතා කරන්නේ නම්

මෙය

සමහර විට එය කර්මාන්තශාලා නියෝගයක පාලකය තුළ ඇති නිසා හෝ යම් ආකාරයක බැඳීමක් අවශ්‍ය නිසා, ඔබ එවැනි දෙයක් කරනු ඇත:

.factory('myClass', [
  '$timeout',
  function($timeout) {

    var myClass = function() {};

    myClass.prototype.surprise = function() {
      // Do something suprising! :D
    };

    myClass.prototype.beAmazing = function() {
      // Here 'this' referes to the current instance of myClass

      $timeout(angular.bind(this, function() {
          // Run my code safely here and this is not undefined but
          // the same as outside of this anonymous function
          this.surprise();
       }));
    }

    return new myClass();

  }]
)

Http://docs.angularjs.org/error/$rootScope:inprog බලන්න

ඔබට ඇමතුමක් ඇති විට ගැටළුව පැන නගින්නේ $applyසමහර විට කෝණික කේතයෙන් පිටත අසමමුහුර්තව ධාවනය වන විට ($ අයදුම් කළ විට) සහ සමහර විට කෝණික කේතය තුළ සමමුහුර්තව ( $digest already in progressදෝෂය ඇති කරයි).

නිදසුනක් ලෙස, ඔබ සතුව පුස්තකාලයක් ඇති විට එය අසමමුහුර්තව සේවාදායකයකින් අයිතම ලබාගෙන ඒවා හැඹිලිගත කරයි. පළමු වරට අයිතමයක් ඉල්ලා සිටින විට, කේත ක්‍රියාත්මක කිරීම අවහිර නොකිරීමට එය අසමමුහුර්තව ලබා ගනී. කෙසේ වෙතත්, දෙවන වරට, අයිතමය දැනටමත් හැඹිලියේ ඇති බැවින් එය සමමුහුර්තව ලබා ගත හැකිය.

මෙම දෝෂය වළක්වා ගත හැකි ක්‍රමය නම් ඇමතුම් කේතය $applyඅසමමුහුර්තව ක්‍රියාත්මක වන බව සහතික කිරීමයි . ඔබගේ කේතය ඇමතුමක සිට $timeoutප්‍රමාදයකින් සකසා ඇති විට මෙය කළ හැකිය 0(එය පෙරනිමිය වේ). කෙසේ වෙතත්, ඔබේ කේතය ඇතුළත $timeoutඇමතීමේ අවශ්‍යතාවය ඉවත් කරයි $apply, මන්ද $ කල් ඉකුත්වීම වෙනත් $digestචක්‍රයක් තනිවම අවුලුවන අතර එමඟින් අවශ්‍ය සියලුම යාවත්කාලීන කිරීම් සිදු කරනු ඇත.

විසඳුමක්

කෙටියෙන් කිවහොත්, මෙය කරනවා වෙනුවට:

... your controller code...

$http.get('some/url', function(data){
    $scope.$apply(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...

මෙය කරන්න:

... your controller code...

$http.get('some/url', function(data){
    $timeout(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...

$applyඑය ක්‍රියාත්මක වන්නේ කේතය ක්‍රියාත්මක වන බව ඔබ දැනගත් විට පමණි .

$timeoutඅධික ලෙස භාවිතා කිරීමේ යම් යම් අවාසි ගැන යමෙකු නොදන්නේ නම් $apply, ඒ වෙනුවට ඔබට සෑම විටම $timeout(ශුන්‍ය ප්‍රමාදයකින්) භාවිතා කළ නොහැක්කේ මන්දැයි මම නොදනිමි $apply, මන්ද එය දළ වශයෙන් එකම දේ කරනු ඇත.

ඔබ මෙම දෝෂය ලබා ගත් විට, එයින් මූලික වශයෙන් අදහස් වන්නේ එය දැනටමත් ඔබගේ දැක්ම යාවත්කාලීන කිරීමේ ක්‍රියාවලියක යෙදී සිටින බවයි. $apply()ඔබේ පාලකය තුළට ඇමතීමට ඔබට අවශ්‍ය නොවිය යුතුය . ඔබ අපේක්ෂා කළ පරිදි ඔබේ දැක්ම යාවත්කාලීන නොවන්නේ නම්, ඇමතුමෙන් පසු ඔබට මෙම දෝෂය ලැබෙනු ඇත $apply(), එයින් බොහෝ දුරට අදහස් වන්නේ ඔබ ආකෘතිය නිවැරදිව යාවත්කාලීන නොකිරීමයි. ඔබ විශේෂතා කිහිපයක් පළ කළහොත්, අපට මූලික ගැටළුව හඳුනාගත හැකිය.

ආරක්ෂිත කෙටිම $applyආකාරය:

$timeout(angular.noop)

ඔබට evalAsync ද භාවිතා කළ හැකිය. ඩයිජෙස්ට් අවසන් වූ පසු එය ක්‍රියාත්මක වේ!

scope.evalAsync(function(scope){
    //use the scope...
});

පළමුවෙන්ම, මේ ආකාරයෙන් එය නිවැරදි නොකරන්න

if ( ! $scope.$$phase) { 
  $scope.$apply(); 
}

$ අදියර යනු $ ඩයිජෙස්ට් චක්‍රයේ බූලියන් ධජයක් බැවින් එය අර්ථවත් නොවේ, එබැවින් ඔබගේ $ අයදුම් කිරීම () සමහර විට ක්‍රියාත්මක නොවේ. එය නරක පුරුද්දක් බව මතක තබා ගන්න.

ඒ වෙනුවට භාවිතා කරන්න $timeout

    $timeout(function(){ 
  // Any code in here will automatically have an $scope.apply() run afterwards 
$scope.myvar = newValue; 
  // And it just works! 
});

ඔබ යටි ඉරි හෝ ලොඩාෂ් භාවිතා කරන්නේ නම්, ඔබට defer () භාවිතා කළ හැකිය:

_.defer(function(){ 
  $scope.$apply(); 
});

සමහර විට ඔබ මේ ආකාරයෙන් භාවිතා කරන්නේ නම් ඔබට තවමත් දෝෂ ලැබෙනු ඇත ( https://stackoverflow.com/a/12859093/801426 ).

මේක උත්සාහ කරන්න:

if(! $rootScope.$root.$$phase) {
...

සන්දර්භය අනුව ඔබ $ evalAsync හෝ $ කල් ඉකුත් වීම භාවිතා කළ යුතුය.

මෙය හොඳ පැහැදිලි කිරීමක් සහිත සබැඳියකි:

http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm

භාවිතා කිරීමට උත්සාහ කරන්න

$scope.applyAsync(function() {
    // your code
});

වෙනුවට

if(!$scope.$$phase) {
  //$digest or $apply
}

$ applyAsync පසුකාලීනව සිදුවීමට $ අයදුම් කිරීම උපලේඛනගත කරන්න. එකම ඩයිජස්ට් එකකින් ඇගයීමට ලක් කළ යුතු බහුවිධ ප්‍රකාශන පෝලිම් ගැසීමට මෙය භාවිතා කළ හැකිය.

සටහන: $ ඩයිජෙස්ට් තුළ, $ applyAsync () ගලා යන්නේ වත්මන් විෂය පථය $ rootScope නම් පමණි. මෙයින් අදහස් කරන්නේ ඔබ ළමා විෂය පථයක් මත $ ඩයිජෙස්ට් ලෙස හැඳින්වුවහොත්, එය $ applyAsync () පෝලිම ව්‍යංගයෙන් ගලා නොයන බවයි.

උදාහරණය:

  $scope.$applyAsync(function () {
                if (!authService.authenticated) {
                    return;
                }

                if (vm.file !== null) {
                    loadService.setState(SignWizardStates.SIGN);
                } else {
                    loadService.setState(SignWizardStates.UPLOAD_FILE);
                }
            });

යොමුව:

1. විෂය පථය. $ AppAAsync () එදිරිව විෂය පථය Ang AngularJS 1.3 හි evalAsync ()

2. AngularJs Docs

ජීර්ණ චක්‍රයක් අවුලුවනවාට වඩා අභිරුචි සිදුවීමක් භාවිතා කිරීමට මම ඔබට උපදෙස් දෙමි.

අභිරුචි සිදුවීම් විකාශනය කිරීම සහ මෙම සිදුවීම් සඳහා සවන්දෙන්නන් ලියාපදිංචි කිරීම ඔබ ජීර්ණ චක්‍රයක සිටියත් නැතත් සිදුවීමට බලාපොරොත්තු වන ක්‍රියාවක් ආරම්භ කිරීමට හොඳ විසඳුමක් බව මම සොයා ගතිමි.

අභිරුචි සිදුවීමක් නිර්මාණය කිරීමෙන් ඔබ ඔබේ කේතය සමඟ වඩාත් කාර්යක්ෂම වන්නේ ඔබ එම සිදුවීමට දායක වූ සවන්දෙන්නන් පමණක් පොළඹවන නිසාත්, ඔබ විෂය පථයට ආරාධනා කළහොත් විෂය පථයට බැඳී ඇති සියලුම ඔරලෝසු අවුලුවන නිසාත් නොවේ.

$scope.$on('customEventName', function (optionalCustomEventArguments) {
   //TODO: Respond to event
});


$scope.$broadcast('customEventName', optionalCustomEventArguments);

නැවත භාවිතා කළ හැකි $ ආරක්ෂිත යෙදුම් ශ්‍රිතයක් නිර්මාණය කිරීමේදී යෙර්ෆ්මූ විශාල කාර්යයක් ඉටු කළේය:

https://github.com/yearofmoo/AngularJS-Scope.SafeApply

භාවිතය :

//use by itself
$scope.$safeApply();

//tell it which scope to update
$scope.$safeApply($scope);
$scope.$safeApply($anotherScope);

//pass in an update function that gets called when the digest is going on...
$scope.$safeApply(function() {

});

//pass in both a scope and a function
$scope.$safeApply($anotherScope,function() {

});

//call it on the rootScope
$rootScope.$safeApply();
$rootScope.$safeApply($rootScope);
$rootScope.$safeApply($scope);
$rootScope.$safeApply($scope, fn);
$rootScope.$safeApply(fn);

ශ්‍රිතය ක්‍රියාත්මක වන බව මා දන්නා ස්ථාන $evalවෙනුවට ඇමතීමෙන් මෙම ගැටළුව විසඳීමට මට හැකි විය .$apply$digest

අනුව ලේඛන , $applyමූලික වශයෙන් මෙම කරන්නේ:

function $apply(expr) {
  try {
    return $eval(expr);
  } catch (e) {
    $exceptionHandler(e);
  } finally {
    $root.$digest();
  }
}

මගේ නඩුවේදී, ng-clickවිචල්‍යයක් විෂය පථයක් තුළ විචල්‍යයක් වෙනස් කරන අතර, එම විචල්‍යය පිළිබඳ $ ඔරලෝසුව වෙනත් විචල්‍යයන් වෙනස් කළ යුතුය $applied. මෙම අවසාන පියවර "දැනටමත් ජීර්ණය වෙමින් පවතී" දෝෂය ඇති කරයි.

ඔරලෝසු ප්‍රකාශනය ඇතුළත ප්‍රතිස්ථාපනය $applyකිරීමෙන් $evalවිෂය පථ විචල්‍යයන් අපේක්ෂිත පරිදි යාවත්කාලීන වේ.

එම නිසා, කෝණික තුළ වෙනත් වෙනසක් නිසා ඩයිජෙස්ට් කෙසේ හෝ ක්‍රියාත්මක වන බව පෙනේ නම්, $evalඔබ කළ යුත්තේ එපමණකි.

$scope.$$phase || $scope.$apply();ඒ වෙනුවට භාවිතා කරන්න

කෝණික ලේඛන පරීක්ෂා අමතන්න බව තේරුම් $$phaseයනු ප්රති-රටාව , මම ලබා ගැනීමට උත්සාහ $timeoutහා _.deferවැඩ කිරීමට.

කල් ඉකුත්වීම සහ කල් දැමූ ක්‍රම මඟින් {{myVar}}ඩොම් තුළ ෆවුට් වැනි විග්‍රහ නොකළ අන්තර්ගතයන් සැණෙකින් නිර්මාණය වේ. මට මෙය පිළිගත නොහැකි විය. යම් දෙයක් අනවසරයෙන් සිදුවන බවත්, සුදුසු විකල්පයක් නොමැති බවත්, එය බොහෝ දේ නොකියයි.

සෑම අවස්ථාවකම ක්‍රියාත්මක වන එකම දෙය නම්:

if(scope.$$phase !== '$digest'){ scope.$digest() }.

මෙම ක්‍රමයේ අන්තරාය මට තේරෙන්නේ නැත, නැතහොත් එය අදහස් දැක්වීමේ සහ කෝණික කණ්ඩායමේ පුද්ගලයින් විසින් හැක් කිරීමක් ලෙස විස්තර කරන්නේ ඇයි. විධානය නිවැරදි හා කියවීමට පහසු බව පෙනේ:

"එකක් දැනටමත් සිදුවන්නේ නැත්නම් ඩයිජෙස්ට් කරන්න"

කෝපි ස්ක්‍රිප්ට්හි එය ඊටත් වඩා ලස්සනයි:

scope.$digest() unless scope.$$phase is '$digest'

මෙහි ඇති ගැටලුව කුමක්ද? FOUT එකක් නිර්මාණය නොකරන විකල්පයක් තිබේද? $ ආරක්ෂිත යෙදුම හොඳ පෙනුමක් ඇති නමුත් $$phaseපරීක්ෂණ ක්‍රමයද භාවිතා කරයි .

මෙය මගේ උපයෝගීතා සේවාවයි:

angular.module('myApp', []).service('Utils', function Utils($timeout) {
    var Super = this;

    this.doWhenReady = function(scope, callback, args) {
        if(!scope.$$phase) {
            if (args instanceof Array)
                callback.apply(scope, Array.prototype.slice.call(args))
            else
                callback();
        }
        else {
            $timeout(function() {
                Super.doWhenReady(scope, callback, args);
            }, 250);
        }
    };
});

එය භාවිතා කිරීම සඳහා මෙය උදාහරණයකි:

angular.module('myApp').controller('MyCtrl', function ($scope, Utils) {
    $scope.foo = function() {
        // some code here . . .
    };

    Utils.doWhenReady($scope, $scope.foo);

    $scope.fooWithParams = function(p1, p2) {
        // some code here . . .
    };

    Utils.doWhenReady($scope, $scope.fooWithParams, ['value1', 'value2']);
};

මම මෙම ක්‍රමය භාවිතා කර ඇති අතර එය හොඳින් ක්‍රියාත්මක වන බව පෙනේ. මෙය චක්‍රය අවසන් වී පසුව අවුලුවන කාලය එනතෙක් බලා සිටී apply(). apply(<your scope>)ඔබට අවශ්‍ය ඕනෑම තැනක සිට ශ්‍රිතය අමතන්න .

function apply(scope) {
  if (!scope.$$phase && !scope.$root.$$phase) {
    scope.$apply();
    console.log("Scope Apply Done !!");
  } 
  else {
    console.log("Scheduling Apply after 200ms digest cycle already in progress");
    setTimeout(function() {
        apply(scope)
    }, 200);
  }
}

මම නිදොස්කරණය අක්‍රීය කළ විට, දෝෂය තවදුරටත් සිදු නොවේ. මගේ නඩුවේදී , එය නිදොස්කරණය කරන්නා කේත ක්‍රියාත්මක කිරීම නැවැත්වීම නිසාය.

ඉහත පිළිතුරු වලට සමාන නමුත් මෙය මට විශ්වාසවන්තව වැඩ කර ඇත ... සේවාවක් තුළ:

    //sometimes you need to refresh scope, use this to prevent conflict
    this.applyAsNeeded = function (scope) {
        if (!scope.$$phase) {
            scope.$apply();
        }
    };

ඔයාට පාවිච්චි කරන්න පුළුවන්

$timeout

දෝෂය වැළැක්වීමට.

 $timeout(function () {
                        var scope = angular.element($("#myController")).scope();
                        scope.myMethod();
                        scope.$scope();
                    },1);

ගැටළුව මූලික වශයෙන් පැමිණෙන්නේ, ඩයිජෙස්ට් චක්‍රය ක්‍රියාත්මක කිරීම සඳහා අපි කෝණික ලෙස ඉල්ලා සිටින අතර, එහි ක්‍රියාවලිය තුළ වුවද අවබෝධය සඳහා කෝණික ලෙස ගැටළුවක් නිර්මාණය වේ. විපාක විධාන කොන්සෝලය තුළ.
1. විෂය පථය ඇමතීමට කිසිදු තේරුමක් නැත.
2. මෙම කේතය එහි දේශීය කෝණික නොවන කෝණික එනම් setTimeout අර්ථ නිසා වැනිලා JavaScript ක්රියාකාරිත්වයට යයි
3. ඔබ භාවිතා කල හැකි බව සිදු කිරීම සඳහා

(!. විෂය පථය $$ අදියර) {නම්
. විෂය පථය $ evalAsync (කාර්යය () {

}); }

        let $timeoutPromise = null;
        $timeout.cancel($timeoutPromise);
        $timeoutPromise = $timeout(() => {
            $scope.$digest();
        }, 0, false);

මෙම දෝෂය වළක්වා ගැනීමට සහ අයදුම් කිරීමෙන් වැළකී සිටීමට හොඳ විසඳුමක් මෙන්න

බාහිර සිදුවීමක් මත පදනම්ව ඇමතුමක් ලබා දෙන්නේ නම්, ඔබට මෙය නිශ්කාෂණය (0) සමඟ ඒකාබද්ධ කළ හැකිය. ඉහත දැක්වෙන්නේ අප භාවිතා කරන 'නිදොස් කිරීම' සහ කේතයේ සම්පූර්ණ උදාහරණයයි

.factory('debounce', [
    '$timeout',
    function ($timeout) {

        return function (func, wait, apply) {
            // apply default is true for $timeout
            if (apply !== false) {
                apply = true;
            }

            var promise;
            return function () {
                var cntx = this,
                    args = arguments;
                $timeout.cancel(promise);
                promise = $timeout(function () {
                    return func.apply(cntx, args);
                }, wait, apply);
                return promise;
            };
        };
    }
])

යම් සිදුවීමකට සවන් දීමට සහ ඔබට අවශ්‍ය විෂය පථයෙන් $ ඩයිජෙස්ට් අමතන්න

        let $timeoutPromise = null;
        let $update = debounce(function () {
            $timeout.cancel($timeoutPromise);
            $timeoutPromise = $timeout(() => {
                $scope.$digest();
            }, 0, false);
        }, 0, false);

        let $unwatchModelChanges = $scope.$root.$on('updatePropertiesInspector', function () {
            $update();
        });


        $scope.$on('$destroy', () => {
            $timeout.cancel($update);
            $timeout.cancel($timeoutPromise);
            $unwatchModelChanges();
        });

මෙය හමු විය: https://coderwall.com/p/ngisma එහිදී නේතන් වෝකර් (පිටුවේ පහළින්) විනෝදජනක 'සේෆ් ඇප්ලයි' නිර්මාණය කිරීම සඳහා $ rootScope හි සැරසිලි කරුවෙකු යෝජනා කරයි, කේතය:

yourAwesomeModule.config([
  '$provide', function($provide) {
    return $provide.decorator('$rootScope', [
      '$delegate', function($delegate) {
        $delegate.safeApply = function(fn) {
          var phase = $delegate.$$phase;
          if (phase === "$apply" || phase === "$digest") {
            if (fn && typeof fn === 'function') {
              fn();
            }
          } else {
            $delegate.$apply(fn);
          }
        };
        return $delegate;
      }
    ]);
  }
]);

මෙය ඔබගේ ගැටළුව විසඳනු ඇත:

if(!$scope.$$phase) {
  //TODO
}