这是我之前的一个问题的后续，这是我正在寻找的东西，但我似乎无法让它发挥作用。这就是我正在尝试使用的 here这就是我尝试过的:
index.html
<head>
<title>Building Angular Directives</title>
<link href="css/angular-carousel.css" rel="stylesheet" type="text/css"/>
<!-- Angular Components -->
<script type = "text/javascript" src = "angular/angular.js"></script>
<script type = "text/javascript" src = "angular/angular-route.js"></script>
<script type = "text/javascript" src = "angular/angular-mocks.js"></script>
<script type = "text/javascript" src = "angular/angular-loader.js"></script>
<!-- App definition -->
<script type = "text/javascript" src = "app.js"></script>
<!-- Directives -->
<script type = "text/javascript" src = "directives/my-directives.js"></script>
<!-- Controllers -->
<script type = "text/javascript" src = "controllers/my-controllers.js"></script>
<!-- Custom Carousel -->
<script type = "text/javascript" src = "js/angular-touch.min.js"></script>
<script type = "text/javascript" src = "js/angular-carousel.js"></script>
</head>
<body>
<div ng-controller = "HomeController">
<section remembered at-greeting='customer'
equals-greeting='customer'
amper-greeting='getGreeting()'>
</section>
<hr/>
<ul rn-carousel class="image">
<li ng-repeat="image in sportImages">
<div class="layer">{{image}}</div>
</li>
</ul>
</div>
</body>
my-controllers.js
myApp.controller('HomeController', ['$scope', function ($scope) {
// Test
$scope.greeting = "Hello World - from the controller";
$scope.sportImages = [
'http://placekitten.com/g/200/300',
'http://placekitten.com/g/200/301',
'http://placekitten.com/g/200/303'
];
}]);
我在应用程序创建过程中声明了对 Angular 依赖的依赖:
app.js
var myApp = angular.module( 'myApp',['angular-carousel'] );
屏幕上没有出现任何内容，错误控制台中也没有显示任何内容，这表明正在加载所有内容 - 可能只是顺序不正确？
有什么建议吗？谢谢
最佳答案
它不起作用的实际原因是没有在 CSS 中为无序列表设置高度，以及对它的工作原理的误解。
这是一个有效的 Plunkr它适用于当前可用的所有动画。虽然我将对其进行改进以移除内部样式并将整个内容打包到一个新指令中。
以及代码以防万一它从 Plunkr 中消失:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Building Angular Directives</title>
<link href="css/angular-carousel.min.css" rel="stylesheet" type="text/css" />
<style>
ul {
height:300px;
width: 600px;
background:blue;
}
img.alignLeft {
float: left;
}
</style>
<!-- Angular Components -->
<script type="text/javascript" src="angular/angular.js"></script>
<script type="text/javascript" src="angular/angular-touch.js"></script>
<script type="text/javascript" src="angular/angular-carousel.js"></script>
<!-- App definition -->
<script type="text/javascript" src="app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="controllers/my-controllers.js"></script>
</head>
<body>
<div ng-controller="HomeController">
<ul rn-carousel rn-carousel-controls class="image">
<li ng-repeat="images in kittens">
<div ng-repeat="image in images">
<img class="alignLeft" ng-src="{{image}}"/>
</div>
</li>
</ul>
<hr/>
<ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slide" class="image">
<li ng-repeat="images in kittens">
<div ng-repeat="image in images">
<img class="alignLeft" ng-src="{{image}}"/>
</div>
</li>
</ul>
<hr/>
<ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="zoom" class="image">
<li ng-repeat="images in kittens">
<div ng-repeat="image in images">
<img class="alignLeft" ng-src="{{image}}"/>
</div>
</li>
</ul>
<hr/>
<ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="hexagon" class="image">
<li ng-repeat="images in kittens">
<div ng-repeat="image in images">
<img class="alignLeft" ng-src="{{image}}"/>
</div>
</li>
</ul>
<hr/>
<ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="slideAndFade" class="image">
<li ng-repeat="images in kittens">
<div ng-repeat="image in images">
<img class="alignLeft" ng-src="{{image}}"/>
</div>
</li>
</ul>
<hr/>
<ul rn-carousel rn-carousel-auto-slide rn-carousel-transition="none" class="image">
<li ng-repeat="images in kittens">
<div ng-repeat="image in images">
<img class="alignLeft" ng-src="{{image}}"/>
</div>
</li>
</ul>
<hr/>
</div>
</body>
这是我正在使用的 HomeController 中的集合:
$scope.kittens = [
['http://placekitten.com/g/200/300','http://placekitten.com/g/200/301','http://placekitten.com/g/200/303'],
['http://placekitten.com/g/200/301','http://placekitten.com/g/200/303','http://placekitten.com/g/200/300'],
['http://placekitten.com/g/200/303','http://placekitten.com/g/200/300','http://placekitten.com/g/200/301']
];
关于AngularJS 触摸轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26455354/