Question

以下是模板和模板的使用者。 <gallery>是我想要创建的指令。

TestCarousel.html

<html ng-app="imageCarouselModule" >
<head>
    <meta charset="utf-8">
    <title>Test Carousel</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
   <!-- <link rel="stylesheet" href="style.css">-->
    <script src ="imageCarousel.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

<script>


    var app=angular.module('imageCarouselModule',[]);
    app.controller('MainController',function($scope){

        $scope.images=[{"src":"http://t3.gstatic.com/images?q=tbn:ANd9GcR1Kp2JmcnxhBOf66aN_JqMWl3h_okOQKFX_kEqwr9mRe5iPomy"},
            {"src":"http://t3.gstatic.com/images?q=tbn:ANd9GcQAoT9UmjmunwFTAA19_n1auOFR_JG017_TUru-E91T7nIH8HyU", },
            {"src":"http://t2.gstatic.com/images?q=tbn:ANd9GcTfntbVv3pl5wFCe6IdkaMVrme_Au9TD8Z_xE95Ezv6jz8oK4nT", },
            {"src":"http://t1.gstatic.com/images?q=tbn:ANd9GcSAOralDJGSVtfirbHG5VdFqG8fTqXMh7C4Xd_aHCy176SKNQqK", },
            {"src":"http://fc08.deviantart.net/fs70/f/2012/122/0/c/landscape_wallpaper_by_nickchoubg-d4yaep3.png", }
        ];

        $scope.action=function(image){
            $scope.selectedImage = image;


        };

    });


    app.directive('gallery',function(){

        return{
            templateUrl:'imgCarousel.html',
            scope:{images:'=',
                action:'&',},

            link:function postLink(scope, element, attrs){
                $scope.selectedImage=$scope.images[0];
            }

        };

    });




</script>
<body ng-controller="MainController">
</body>
<gallery images="images" ></gallery>
</head>
</html>

imgCarousel.html

<div>
<div>
<img ng-src="{{selectedImage.src}}"/>
        </div>
    <ul>
<li ng-repeat="image in images">
<img ng-src="{{image.src}}" ng-click="action(image)">
        </ul>
    </div>

我正在尝试在指令上使用事件监听器。

Answer 1

        <carousel interval="5000" >
<slide ng-repeat="(key,item) in images" active="selectedImage" ng-swipe-right="prev()" ng-swipe-left="next()">
    <img ng-src="{{item.src}}" >
</slide>

此外，您可以使用动画并触摸

angular.module("imageCarouselModule", ['ngAnimate', 'ui.bootstrap', 'ngTouch']);

注意，我正在使用Bootstrap 3.3.4， Angularjs Core 1.4.3（左右滑动在以前的版本中不起作用）， Angularjs Animate， AngularJs Touch，和AngularJs UI Bootstrap

Answer 2

看起来你的指令搞砸了，并且错过了 restrict 选项，继承了固定版本：

app.directive('gallery', function() {

         return {
             restrict: 'E',
             templateUrl: 'imgCarousel.html',
             scope: {
                 images: '=',
                 action: '&',
             },

             link: function(scope, element, attrs) {
                 scope.selectedImage = scope.images[0];
             }

         };

     });

<强> HTML

<body ng-controller="MainController">
  {{test}}
  <gallery images="images" ></gallery></body>

尝试使用有角度但不起作用的缩略图创建旋转木马

2 个答案: