获取$rootScope:inprog错误,但它需要作用域$申请工作



有没有一种方法可以在下面的代码段中应用范围而不会引发错误?(并且没有像try/catch$timeout或硬编码BONJOUR这样的破解和变通方法)

如果没有SCOPE.$apply(),警报将显示{{HELLO}}而不是BONJOUR

var app = angular.module('APP', [])
  .controller('CTRL', function($scope, $compile) {
    $scope.showBonjour = function() {
      var SCOPE, CONTENT;
      SCOPE = $scope.$root.$new();
      SCOPE.HELLO = 'BONJOUR';
      CONTENT = $compile('<div>{{HELLO}}</div>')(SCOPE);
      SCOPE.$apply(); // This generates the $rootScope:inprog error, but I cannot omit it…
      window.alert(CONTENT.html());
    }
  });
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<html ng-controller="CTRL" ng-app="APP">
    <button ng-click="showBonjour()">Show BONJOUR</button>
</html>

使用$timeout不是一个破解方法。Angular中经常使用它来等待当前摘要周期完成,然后再做一些事情。

这是一个正在工作的Plunker:

http://plnkr.co/edit/XAA1wo0Ebgmk0NqB85BC?p=preview

  var app = angular.module('APP', [])
    .controller('CTRL', function($scope, $compile, $timeout) {
      $scope.showBonjour = function() {
        var SCOPE, CONTENT;
        SCOPE = $scope.$root.$new();
        SCOPE.HELLO = 'BONJOUR';
        CONTENT = $compile('<div>{{HELLO}}</div>')(SCOPE);
        $timeout(function() {
          window.alert(CONTENT.html());
        })
    }
  });

你可以试试这个

制作一个新的函数,如下所示:

$scope.applyif=function()
{                
            if(!$scope.$$phase) {
                $scope.$apply();
            }else
            {
                setTimeout(function(){$scope.applyif();},10);
            }
}

在调用$scope.applyif()代替$scope之后$apply()

最新更新