出现 $rootScope:inprog 错误，但它需要 scope.$apply 才能工作

Question

有没有一种方法可以在下面的代码片段中应用范围而不引发错误？（并且没有像 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>

Answer 1

使用 $timeout 不是 hack。它在 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());
        })
    }

  });

Answer 2

你可以试试这个

像这样创建一个新的函数：

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

调用 $scope.applyif() 代替 $scope.$apply()

出现 $rootScope:inprog 错误，但它需要 scope.$apply 才能工作

Getting a $rootScope:inprog error, but it requires scope.$apply to work

angularjs

angularjs-scope

angularjs-compile