AngularJS $digest already in progress

Question

I'm getting an error when I'm loading data into an angular expression. The data get loaded, but I get the error $digest already in progress.

var dom = angular.element($compile(template)($scope));
$scope.$apply();
var html = $('<div>').append(dom).html();

I'll give you a small part of my template here:

<b>Name: </b>{{model.project.description}}<br />
<b>Littera: </b>{{model.littera}}<br />
<b>Address: </b>{{model.address}}<br />

Now I have tried wrapping the $scope.$apply() into an if statement like below. But I've heard that is a bad way to do it. Doesn't matter that much I guess since it didn't work anyway.

if (scope.$$phase) {
     scope.$apply();
}

It removed the errors, but now the data binding isn't working. Now the output is the expressions and not the actual data. I have also tried putting $scope.$apply() into a $timeout function, but again, now we only get the expression and not the data.

This code is within a directive. I have only given you this code since the rest of the code in the directive is irrelevant here. What do I need to do to get the data binding to work while still using $timeout?

Thanks in advance.

EDIT: A vital part I forgot to tell was that I believe that the error is for 2 expressions that are empty. In chrome debugger they get undefined.

Answer 1

Have you considered implementing your directive in a more angular compatible way instead of dealing with the $apply on you own?

These kind of errors usually come when a piece of code is being executed outside angular context,eg, jquery code.

I will suggest avoiding jQuery as much as possible to write your directive. If required, consider using link function.