有没有办法在下面的代码段中应用范围而不会抛出错误？ (没有黑客和解决方法,如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',$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());
})
}
});
