Angular Directive throws $digest already in progress when trying to call controller method

Question

Here is my plunker - http://plnkr.co/edit/VYH5QbO99ZbMkvc2D4Fe?p=preview

I want to keep the knowledge of controller method outside of directive so used Directive Attribute and pass controller method inside
Now it is failing that $digest already in progress (see console.log)

UPDATE
The body of HTML in firebug looks like

<body data-ng-controller="SummaryController" class="ng-scope">
    <h1>Hello Directive!</h1>
    <ng-view></ng-view>
    <div summary="loadPie1()">
     <div>
      <div id="pie1">I am pie 1</div>
      <div id="pie2">I am pie 2</div>
     </div>
    </div>
</body>

Please help

are you always passing a function that is defined in the scope? — galchen
– galchen, Commented Jun 16, 2013 at 15:31
yes I am doing that, and you can see that in plunker code I have shared — daydreamer
– daydreamer, Commented Jun 16, 2013 at 15:33

galchen · Accepted Answer · 2013-06-16 15:48:11Z

1

Your scope.$apply is not needed there. The link function is called and the template is built with the scope, so you are trying to apply scope changes for template that is being built

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

One way to solve it is:

app.directive('summary', function(){
  return {
    restrict: 'A',
    scope : {
       summary : '='
    },
    templateUrl: 'summary.html',
    link: function(scope, elem, attrs){
      console.log('directive: call to load pie1');
      scope.summary();
    }
  }
});

app.controller('SummaryController', function($scope){
  console.log('controller glued');
  $scope.loadPie1 = function() {
        console.log('controller: will load pie1');
  };
});


<div summary="loadPie1"></div>

You can pass the actual function closure, instead of a string

edited Jun 16, 2013 at 15:48

answered Jun 16, 2013 at 15:20

galchen

5,3003 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

daydreamer Over a year ago

so how can I call my method loadPie1(). I used scope.$apply() by learning from egghead.io/video/LJmZaxuxlRc

daydreamer Over a year ago

This approach works, but I am not sure why approach in egghead.io/video/LJmZaxuxlRc is not working for me? the only difference is that in this video it binds mouse events and then call scope.$apply(attrs.enter)

galchen Over a year ago

because when you bind it, the actual event happens later. When you run scope.$apply() it executes the digest process which has not finished running during the previous compile (that initiates the directive)

Stephen Kaiser Over a year ago

@daydreamer: I was getting that error too. I fixed it by using $timeout to delay the $apply call since I wasn't doing the action later (e.g., after mouse event) as @galchen mentions. So I did this:

app.directive('summary', ['$timeout', function ($timeout) {     return {         restrict: 'A',         link: function (scope, element, attrs) {             $timeout(function () { scope.$apply(attrs.summary); }, 0);         }, 	templateUrl: 'summary.html'     }; }]);

Collectives™ on Stack Overflow

Angular Directive throws $digest already in progress when trying to call controller method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related