1

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.

Philip B
  • 27
  • 1
  • 11
  • If the `$compile` is used inside the link phase of a directive, we don't need `scope.$apply()`. Do you have any plnkr/fiddle for this? – Vinay K Mar 11 '15 at 14:28
  • `$apply` accepts a function as its first parameter. It will run that function and then call `$digest`. Create a function for your `$compile` and `append(dom)` statements, and pass that to the `$apply`, your the data should then populate. (Details: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html ) – DRobinson Mar 11 '15 at 14:29
  • I was thinking of making a fiddle for this. But this directive is quite complex for the angular google maps we use it for. So stripping it down so it would work in a fiddle seemed like a tough task. I forgot to say that the code is inside a promise. Inside .then(function(){}) – Philip B Mar 11 '15 at 14:32

1 Answers1

0

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,e.g., jquery code.

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

Ashish Kumar Singh
  • 56
  • 4
  • Well, the code is inside a link function. And we kinda need to use jQuery here. We haven't found a better way of doing it yet anyway. Unless you have an angular way of writing that jQuery line. – Philip B Mar 11 '15 at 14:59
  • I guess then its better to rethink and redesign your view and the directive instead of going for some hack. This might help http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background/15012542#15012542 – Ashish Kumar Singh Mar 11 '15 at 15:16