我开始使用 MEAN.JS并尝试在 Angular Bootstrap examples page 上实现轮播示例.我使用命令 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 的 Controller (文件名 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,以供有兴趣查看它的任何人使用。
最佳答案
这是 Angular 动画模块和 Angular Bootstrap 的错误...显然它一直存在,需要进行一些挖掘,但那里有答案。
上面有一堆傻瓜(参见 github angular-ui/bootstrap issue threads #1273 #1350)。它的要点是:
Controller 中的 $animate.enabled(false) 将修复它。当然,这取决于您是否在该 Controller 中使用动画,您需要稍微调整一下。
将它放入您的 Controller 中,它就会起作用。您可以尝试其他设置(设置为 true),看看它是如何破坏事物的。您需要在 Controller 中引用 $animate 才能执行此操作。
angular.module('core').controller('MyCarouselController', ['$scope', 'ngAnimate', 'Authentication',
function($scope, $animate, Authentication) {
$animate.enabled(false);
关于javascript - MEAN.JS 和 angular bootstrap 轮播不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24517872/