[英]MEAN.JS and angular bootstrap carousel not working
我开始使用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,以便任何有兴趣了解它的人。
角动画模块和角度引导程序是一个错误...显然它已经存在,它需要一些挖掘,但有答案。
它上面有一堆掠夺者(参见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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.