AngularJS Touch旋转木马

这是我之前的一个问题的后续，这是我看起来很远，但我似乎无法得到它的工作。这就是我想用here工作，这是我已经试过：AngularJS Touch旋转木马

的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']);

没有什么，没有什么会出现在这表明一切都被加载错误控制台 - 也许只是没有按照正确的顺序？

有什么建议吗？谢谢

来源

2014-10-19 Katana24

的实际原因为什么它不工作是因为没有在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'] 
    ];

来源

2014-10-23 15:24:17 Katana24

我记得必须设置一个高度来强制它打开，就像。

.layer { height:300px }

来源

2014-10-19 21:09:53 Dylan

不幸的是这并没有区别 – Katana24 2014-10-20 07:52:06

也许是在IMG，我只记得是加载，我可以看到的元素在检查所以只是我搞砸在Chrome开发工具中使用CSS。 – Dylan 2014-10-20 17:25:02

我有同样的问题和解决方法：

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

来源

2015-11-17 09:55:01

我不明白这是如何回答这个问题的？这是对另一个答案的评论吗？ – SuperBiasedMan 2015-11-17 10:16:54

我改变了我的答案，以便更清楚。 – 2015-11-17 11:22:55

AngularJS Touch旋转木马

回答

相关问题