Menu
Is there a way of applying scope in the snippet below without it throwing an error? (and without hacks and workaround like try/catch, $timeout or hard-coding BONJOUR)
Without SCOPE.$apply(), the alert shows {{HELLO}} instead of 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>
544
Using $timeout isn't a hack. It's used quite often in Angular to wait until the current digest cycle is completed, then do something.
Here's a working 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());
})
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
