1

I'm new in angularjs and working on a ajax loading item carousel with angular, when I put items static in carousel it work fine but when I put ng-repeat to render dynamic the rendered items are not right and it looks like that the carousel js is not working on them and put them in order.

I load the js of the carousel with ng-include and it works fine for static items but not for angular rendered items

What should I do? Am I doing a sequence wrong?

My Controller loading varible:

hmc.Sliders.Episodes.push(Movies);

In my home view:

<div class="row rtl prj-row">
    <div class="col-sm-10 col-sm-push-1 col-xs-10 col-xs-push-1">
      <h4 class="prg-row-heading rtl">my slider<span class="glyphicon glyphicon-menu-left"></span></h4>
      <div class="owl-carousel">
        <div class="item" ng-repeat="slider in hmc.Sliders.Episodes[hmc.Sliders.Page-1]">
          <div class="prj-show-box one-row">
            <div class="prj-show-box-cover">
              <ul>
                <li>{{::slider.title}}</li>
                <li>{{::slider.duration_mins}}</li>
              </ul>
            </div>
            <img ng-src="{{::slider .picture_path}}" width="213" height="318"  alt="" class="img-responsive"/></div>
        </div>
      </div>
    </div>
  </div>

It put correctly the data and renders items but not showing correctly

But it show items correctly for static ones:

<div class="row rtl prj-row">
      <div class="col-sm-10 col-sm-push-1 col-xs-10 col-xs-push-1">
        <h4 class="prj-row-heading rtl">sliders<span class="glyphicon glyphicon-menu-left"></span></h4>
        <div class="owl-carousel">

          <div class="item">
            <div class="prj-show-box"><img src="/media/img/home/live/1.gif" width="220" height="148"  alt="" class="img-responsive"/></div>
            <div class="prj-show-box"><img src="/media/img/home/live/1.gif" width="220" height="148"  alt="" class="img-responsive"/></div>
          </div>
        </div>
      </div>
    </div>

This is how it's look like:

Click here to see the image

Masoud motallebipour
  • 39
  • 7
  • 1
    Can you show us some code? – valepu Oct 19 '15 at 10:53
  • Yes, I'll put in seconds – Masoud motallebipour Oct 19 '15 at 10:58
  • you need to make sure that the dom modifications are finished before instantiating the carousel. In pure javascript, we can do this by wrapping the carousel instantiation using the setTimeout 0 trick: `setTimeout( yourFunction, 0)` setTimeout blocks until dom is updated. pretty sure you can do this in angularjs with `$scope.Timeout` but not completely sure of this. just google `setTimeout angularjs` for more information. – r3wt Oct 19 '15 at 11:04
  • i'm sorry to ask but i'd like to see more code. I need to see the controller (where you make the ajax call and then push data inside the array) and the place where you instantiate the carousel – valepu Oct 19 '15 at 11:48

1 Answers1

0

I fount the answer myself and the problem was js was loading before angular finish getting data, so I made the carousel a directive and made a setTimeout(function(){},500) for items to be rendered.

here is where I found the soloution:

Applying angularjs ng-repeat to owl-carousel

Community
  • 1
  • 1
Masoud motallebipour
  • 39
  • 7
  • I don't have problem on first time load, I exactly using that structure, but the thing is when I add Items with ajax call after the carousel is rendered the whole carousel become unrendered!! – Masoud Motallebipour Nov 09 '15 at 11:11