MEAN.JS and angular bootstrap carousel not working

Question

I am getting started with MEAN.JS and am trying to implement the carousel example on the Angular Bootstrap examples page. I created a boilerplate project using the command yo meanjs and modified the home.client.view.html to remove the jumbotron and replace it with the following html (copied from the ui bootstrap example)

<div ng-controller="MyCarouselController">
  <div style="height: 305px">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {{$index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>
  </div>
  <div class="row">
    <div class="col-md-6">
      <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
    </div>
    <div class="col-md-6">
      Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
      <br />Enter a negative number to stop the interval.
    </div>
  </div>
</div>

I added a controller named MyCarouselController (filename carousel.client.controller.js) and added javascript from the example

angular.module('core').controller('MyCarouselController', ['$scope', 'Authentication',
  function($scope, Authentication) {
    $scope.myInterval = 5000;
    var slides = $scope.slides = [];
    $scope.addSlide = function() {
      var newWidth = 600 + slides.length;
      slides.push({
        image: 'http://placekitten.com/' + newWidth + '/300',
        text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
          ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
      });
    };
    for (var i=0; i<4; i++) {
      $scope.addSlide();
    }
  }
]);

The problem occurs after the first transition (either automatic or user click). The carousel becomes unresponsive with no error messages displayed in the developer console.

I have verified that ui-bootstrap has been included as a dependency in the config.js file as well.

I am at a loss as to where to look from here and was hoping someone might be able to point me in the right direction. I have pushed a copy of the project up to Github for anyone interested in taking a look at it.

https://github.com/jamesamuir/MEANTest

score 7 · Accepted Answer · edited Oct 16 '14 at 21:07

It is a bug with the angular animation module and angular bootstrap... Apparently it has been around forever, it took some digging but there are answers out there.

There are a bunch of plunkers out there on it (see github angular-ui/bootstrap issue threads #1273 #1350) . The gist of it is :

$animate.enabled(false) in your controller will fix it. Of course depending on if you are using animations in that controller you would need to fiddle around a bit.

Put that in your controller and it will work. You can play with the other settings (setting to true) and see how it breaks things. You will need to reference $animate in your controller to do this.

angular.module('core').controller('MyCarouselController', ['$scope', 'ngAnimate', 'Authentication',
      function($scope, $animate, Authentication) {

    $animate.enabled(false);

MEAN.JS and angular bootstrap carousel not working

1 Answers1