0

I'm new in angular and I'm trying to access some datas inside a variable in which there is tab nested in another tab. (I can't link it because it's sensitive). Anyway, I'm trying to use a nested ng-repeat to access it, but the second ng-repeat is never called, and my console doesn't give me a single error message. This is basically how it looks.

dico = [
    { ...
    content : []
    },
    { ...
    content : []
    },
    ...
];

After checking existing questions (https://stackoverflow.com/questions/19206760/angular-nested-ng-repeat-failure#= & passing 2 $index values within nested ng-repeat) I don't get why my part isn't working.

  <span ng-repeat="toolbar in dico">
        <candidate-toolbar-review average="toolbar.average" labeltoolbar="{{toolbar.name}}">
             <span ng-repeat="field in toolbar.content" layout="row" layout-wrap layout-align="start center">
                <candidate-field-review labelfield="{{field.name}}" ng-model="field.value" my-model="field.checked">
                </candidate-field-review>
             </span>
        </candidate-toolbar-review>
    </span>

In this sample of code, both candidate-field-review and candidate-toolbar-review are directives, if I comment the first one, the second one will output correctly. Elsewise, the first one is printed as expected.

I tried to use $parent and track by $index, but I don't really understand how those work. I also tried to use div instead of span or to not use span at all (and include the ng-repeats inside the candidate-toolbar and candidate-field). What am I missing here ? Thanks !

EDIT : I used those lines instead and it worked out. I still don't really know why it wouldn't work the other way around though.

            <span ng-repeat="toolbar in dico">
                <candidate-toolbar-review ng-model="toolbar.average" labeltoolbar="{{toolbar.name}}" ng-click="showSmart=!showSmart">
                </candidate-toolbar-review>
                <span ng-repeat="field in toolbar.content">
                    <candidate-field-review labelfield="{{field.name}}" ng-model="field.value" my-model="field.checked">
                    </candidate-field-review>
                </span>
            </span>
Community
  • 1
  • 1
Guillaume Roche-Bayard
  • 377
  • 5
  • 17

1 Answers1

0

I believe that 

<span ng-repeat="field in toolbar.content" layout="row" layout-wrap layout-align="start center">

is never called because toolbar exists only in <span ng-repeat="toolbar in dico"> scope. candidate-toolbar-review has it's own controller. to pass toolbar to candidate-toolbar-review you need todo something like:

.directive('candidateToolbarReview', function() {
 return {
  restrict: 'E',
  transclude: true,
 scope: {
   toolbar : '@'
},

and:

<candidate-toolbar-review toolbar="toolbar" average="toolbar.average" labeltoolbar="{{toolbar.name}}">
         <span ng-repeat="field in toolbar.content" layout="row" layout-wrap layout-align="start center">
David
  • 633
  • 8
  • 6