CODEWITHSUNDEEP
angularjsangularjs-directive
Chrobak Stefan
Chrobak Stefan

Reputation: 23

Angular get error "$digest already in progress" when set the restrict attribut to 'E'

i get error "$digest already in progress" when set the restrict attribut to 'E'. here the directive code:

mainApp.directive('scoreDisplay',[
    function() {
        return {
            scope: {
                goal_1: 0,
                goal_2: 0,
                goal_3: 0,
                goal_4: 0,
                goal_5: 0,
                goal_6: 0,
                goal_7: 0
            },
            restrict: 'E',
            templateUrl:'templates/directive-score-display-template.html',
            link: function(scope,element,attrs){}
        };
  }

]);

here the tag:

<score-display></score-display>

here the directive template:

<table>
<tr>
<td ng-model='goal_1'>1</td>
<td ng-model='goal_2'>2</td>
<td ng-model='goal_3'>3</td>
<td ng-model='goal_4'>4</td>
<td ng-model='goal_5'>5</td>
<td ng-model='goal_6'>6</td>
<td ng-model='goal_7'>7</td>
</tr>
</table>

Upvotes: 0

Views: 330

Answers (2)

m59
m59

Reputation: 43785

This portion will throw an error:

        scope: {
            goal_1: 0,
            goal_2: 0,
            goal_3: 0,
            goal_4: 0,
            goal_5: 0,
            goal_6: 0,
            goal_7: 0
        },

The scope property of the directive is meant to declare how attributes on the element should bind to its scope. This should use =, &, or @ depending on how/what you want to bind. It looks like you tried to bind in default values. This should be done in the link function instead, or just use ng-init in the template.

Next issue: Why use ng-model on td? That is meant for elements where you can enter or change data. I'm not sure what you're trying to do there.

Just a note: I would use ng-repeat to make that template more DRY.

<td ng-repeat="item in '1234567'>{{$index+1}}</td>
<!-- or -->
<td ng-repeat="item in '1234567'>{{item}}</td>

Here's a working live demo that might be close to what you're trying to do.

<table>
  <tr ng-init="goals=[1,2,3,4,5,6,7]">
    <td ng-repeat="item in goals track by $index">
      <p>{{goals[$index]}}</p>
      <input ng-model="goals[$index]">
    </td>
  </tr>
</table>

If you still have an issue after making these changes, then the problem exists elsewhere in your code.

Upvotes: 3

DBrowne
DBrowne

Reputation: 131

The scope property of the directive can only accept @,=and & like @m59 said. You can't set the values there as the scope doesnt exist yet.

mainApp.directive('scoreDisplay', function() {
    return {
        scope: {},
        restrict: 'E',
        templateUrl:'templates/directive-score-display-template.html',
        link: function(scope,element,attrs){
          scope.goal_1 = 0;
          scope.goal_2 = 0;
          scope.goal_3 = 0;
        }
    } })

You can only set scope variables/properties once a the directive has been picked up and linked to a function

Upvotes: 0

Related Questions