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旋轉木馬

回答

相關問題