3

我开始使用MEAN.JS并尝试在Angular Bootstrap 示例页面上实现轮播示例。我使用命令yo meanjs创建了一个样板项目，并修改了 home.client.view.html 以删除 jumbotron 并将其替换为以下 html（从 ui bootstrap 示例复制）

<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>

我添加了一个名为 MyCarouselController 的控制器（文件名carousel.client.controller.js）并从示例中添加了 javascript

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();
    }
  }
]);

在第一次转换（自动或用户单击）后出现问题。轮播变得无响应，开发者控制台中没有显示任何错误消息。

我已验证 ui-bootstrap 也已作为依赖项包含在 config.js 文件中。

我不知道从这里往哪里看，希望有人能指出我正确的方向。我已将该项目的副本推送到 Github，供有兴趣查看它的任何人使用。

https://github.com/jamesamuir/MEANTest

4

1 回答 1

7

这是角度动画模块和角度引导程序的错误......显然它一直存在，它需要一些挖掘，但那里有答案。

上面有一堆 plunkers（参见 github angular-ui/bootstrap 问题线程#1273 #1350）。它的要点是：

控制器中的 $animate.enabled(false) 将修复它。当然，取决于您是否在该控制器中使用动画，您需要稍微摆弄一下。

把它放在你的控制器中，它就会工作。您可以使用其他设置（设置为 true），看看它是如何破坏的。您需要在控制器中引用 $animate 来执行此操作。

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

    $animate.enabled(false);
于 2014-07-03T03:01:52.337 回答