Question

这是我之前提出的一个问题的后续问题，这是我目前所看到的，但我似乎无法让它发挥作用。这就是我尝试使用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>

我-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'
    ];

}]);

我在应用程序创建过程中声明了对角度依赖的依赖：

app.js

var myApp = angular.module( 'myApp',['angular-carousel'] );

屏幕上没有任何内容，错误控制台中没有任何内容显示正在加载所有内容 - 可能只是输入顺序不正确？

有什么建议吗？感谢

Answer 1

它无法正常工作的实际原因是因为未在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']
    ];

Answer 2

我有同样的问题并以这种方式解决了：

HTML：

<ul rn-carousel class="image">
        <li ng-repeat="image in images">
            <div class="layer" ng-class="{'last':$last}"><img data-ng-src='{{image}}' /></div>
        </li>
    </ul>

和css：

    li {
        position: relative !important;
        display: block !important;
    }
    .layer{
        position:absolute !important;
    }
    .last{
        position: inherit !important;
    }

Answer 3

我记得必须设置一个高度来强行打开它，比如。

 .layer { height:300px }

AngularJS Touch Carousel

3 个答案: