Angular directive binding isolated scope with ng-repeat

Question

The value of score_stats in the directive is always undefined, and in the parent scope the stats variable has the correct value. What am I doing wrong?

I have this code in the template (and fixtures_stats is an array):

div(ng-repeat="stats in fixture_stats")
  scenario-analysis(score_stats="stats")

This code in the directive:

{                                                                    
  templateUrl: '/' + appVersion + '/directives/scenario-analysis.html',                                                                                                                                              
  scope:{
      score_stats:'=score_stats'
  },
  controller: function($scope, $element, $attrs) {
      console.log('directive $scope.score_stats: ' + $scope.score_stats +
                  ', $scope.$parent.stats: ' + $scope.$parent.stats);
  },                                                                               
};

This code in the directive template:

h3 Scenarios for {{ score_stats.score1 }}-{{ score_stats.score2 }} score combo

In the console I get:

directive $scope.score_stats: undefined, $scope.$parent.stats: [object Object]
directive $scope.score_stats: undefined, $scope.$parent.stats: [object Object]

dfsq · Accepted Answer · 2014-10-30 19:02:50Z

1

First of all you should use an expression for score_stats attribute:

div(ng-repeat="stats in fixture_stats")
  scenario-analysis(score_stats="stats")

Then in directive definition instead of scope_stats scope property will become camelCase'ed:

scope: {
    scoreStats: '='
}

so in directive template you need to change to:

Scenarios for {{ scoreStats.score1 }}-{{ scoreStats.score2 }} score combo

edited Oct 30, 2014 at 19:02

answered Oct 30, 2014 at 18:44

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

2 Comments

user1387717 Over a year ago

No change: score_stats is still undefined in the directive

dfsq Over a year ago

There is some confusion with _ separators in scope attribute names. I would recommend to use common snake-case for predictable results. See updated answer.

Collectives™ on Stack Overflow

Angular directive binding isolated scope with ng-repeat

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related