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

angularjs, angularjs-compile, angularjs-scope

Solution

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());
        })
    }

  });

Problem

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> ```

Original source