3

Hi I want to fill content for Foundation orbit slider dynamically using angular like:

<div class="moreGamesArea">
 <ul class="orbit" data-orbit>
 <li ng-repeat="games in catalogGames">
 <div>{{games[0]}}</div>
 </li>
 </ul>
</div>

But it doesn't initialize slider correctly. In dom-model I see 3 elements <li> as it should be - so angular works ok, but slider - has only one slide! whats wrong? Thanks

asked Apr 1, 2014 at 10:28
5
  • Can you post links to the slider? Also, can you fix the spelling mistakes in your post at the same time (sHi, wring) Commented Apr 1, 2014 at 10:44
  • Fixed mistakes) But I can't put link to the slider, because it's a local page that is part of JSP page, so I can't put it outside of my project =( Commented Apr 1, 2014 at 11:04
  • 1
    @Simha how did you fix it, i am in the same situation but couldn't fix it so far Commented Nov 25, 2014 at 15:53
  • @shadesco hi, sorry, but it was a long time ago, so I don't remember. Commented Nov 26, 2014 at 8:34
  • @Simha it's ok i fixed it. Waited for ng-repeat to finish then loaded foundation(orbit). If (scope.$last ==="true") { load orbit here } Commented Nov 26, 2014 at 16:42

2 Answers 2

3

First. You need to create a directive.

.directive('afterRenderRepeat', function() {
 return function(scope, element, attrs) {
 if (scope.$last){
 $(document).foundation();
 }
 };
})

Second. Call it in section ng-repeat.

<div class="moreGamesArea">
 <ul class="orbit" data-orbit>
 <li ng-repeat="games in catalogGames" data-after-render-repeat>
 <div>{{games[0]}}</div>
 </li>
 </ul>
</div>

The Directive has helped me to release foundation 5.

answered Mar 16, 2015 at 14:10
Sign up to request clarification or add additional context in comments.

Comments

0

in Foundation 6 to initialize orbit use:

Foundation.reInit('orbit');

.directive('initOrbit', function(){
 return function(scope) {
 if (scope.$last){ // when ng-repeat finish to load all elements
 Foundation.reInit('orbit'); // reinit orbit
 }
 };
})

<ul class="orbit-container">
 <li class="orbit-slide" ng-repeat="slide in slides" init-orbit>

more: https://foundation.zurb.com/sites/docs/javascript.html#initializing

answered Oct 12, 2016 at 14:51

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.