What is the best way to pass a model to an include file?

Question

I'm learning AngularJs and I got to a small brick wall...

when I want to split items into tabs, my template is exactly the same for all the tabs, the only small change if the model used in the ng-repeat, as an example:

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="tier6">
        <div ng-include="'partials/vehicles-6-details.html'"></div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tier8">
        <div ng-include="'partials/vehicles-8-details.html'"></div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tier10">
        <div ng-include="'partials/vehicles-10-details.html'"></div>
    </div>
</div>

This way I have to create 3 exact files, where the template is:

<ul class="list-unstyled list-inline list-tier">
    <li ng-repeat="tank in tankInfoLevel6" data-sortby="{{playersByTankId[tank].length}}">
        <span class="badge">{{playersByTankId[tank].length}}</span>
        <img ng-src="{{tankInfo[tank].image}}" alt="" class="tank-img"
             pop-over title="Tank fans" fans="tanksFans[tank]" />
        <br><b>{{tankInfo[tank].name_i18n}}</b>
        <br>({{tankInfo[tank].type_i18n}})
    </li>
</ul>

and the only change is tankInfoLevel6 by tankInfoLevel8 and tankInfoLevel10 respectively.

How can I use a simple file?

I've tried:

<div ng-include="'partials/vehicles-details.html'" 
     ng-init="tierTanks = tankInfoLevel6"></div>

and also with onLoad and onInclude without any good results.

The output is showing the last tab contents in all tabs, so it seems that it loads all but the last call with tankInfoLevel10 is the one that overrides all the tabs.

Is there a way to make this work neatly?

score 0 · Answer 1 · answered Dec 29 '14 at 15:07

0

What about ng-repeat?

<div ng-repeat="tankItem in tankItems">
    <div ng-include="'partials/vehicles-details.html'"></div>
</div>

In template use tankItem.

answered Dec 29 '14 at 15:07

Petr Averyanov

9,327
3
20
38

I could make an `array` of all the 3 models I have, but that is not "neat" it's just hacking :) – balexandre Dec 29 '14 at 15:32
1

Why hacking?... Anyway, you can always make directive for this if u want. – Petr Averyanov Dec 29 '14 at 15:38

score 0 · Answer 2 · answered Dec 29 '14 at 15:29

0

Wouldn't a directive work better here, using an attribute to pass/reference the tankItems list?

answered Dec 29 '14 at 15:29

Ryan

137
1
2
8

I'm trying to learn it without using a directive, but maybe, in the long way, it's the cleanest and simple way to accomplish such thing... – balexandre Dec 29 '14 at 15:33

What is the best way to pass a model to an include file?

2 Answers2