Not working with AngularJS

[salarelv]

I have dynamic list of images created by a AngularJS controller. After calling var slider = new IdealImageSlider.Slider('#slider'); the will be cleared and no img element is set. If I remove the constructor all images show up fine.

[anupamme]

Any headway here? I am also stuck here.

[boyum]

The problem might be that you call var slider = new IdealImageSlider.Slider('#slider'); before the list has been added to the DOM. I assume you're using ngRepeat to create the elements. Use the $viewContentLoaded-event to run the slider-code when the ngRepeat has done its thing.

HTML:

<div id="slider">
  <img ng-repeat="slide in sliderCtrl.slides" src="{{slide.src}}" alt="{{slide.alt}}" />
</div>

JS:

.controller('SliderController', SliderController);

function SliderController() {
  var vm = this;
  activate();

 function activate() {
    $scope.$on('$viewContentLoaded', function() {
     $timeout(function() {
        var slider = new IdealImageSlider.Slider({
          selector: '#slider',
           ...
          });
         slider.start();
       });
    });
  } 
}

[dmiranda2791]

Same problem here. Any solutions?

[boyum]

What have you tried?

[dmiranda2791]

I tried listening to the viewContentLoaded event but it didn't work.

[SirFart4lot]

Simply running inside a timeout solved it for me...

setTimeout(initSlider);