Question

所以我试图将jQuery插件cylce2用于fadeIn和fadeOut div与文本内容。

我让它与图像一起工作，但我很难用div来实现它。

更新

因为我试图在一个小提琴中工作它以某种方式工作。 http://codepen.io/svenjaPixelmechanics/pen/GZaeEe

当我尝试将http请求后的项目更改为本地服务器时，它停止工作。即使创建了html元素，也不会显示任何文本。我认为这是ng-repeat的一个问题？如何使用此指令将滑动效果更改为更长或具有不同的动画？

第2周期本身建议这样做：

<div class="cycle-slideshow" 
    data-cycle-fx="fade" 
    data-cycle-timeout="2000"
    data-cycle-slides="> div"
    >
    <div>
        <p>Lorem ipsum dolor ...
    </div>
    <div>
        <p>Mel eu pertinax ...
    </div>
    <div>
        <p>Utinam electram pertinacia ...
    </div>
</div>

但由于angularJS，这不起作用。

到目前为止我做了什么：

HTML

//prints only the text

  <div id="slideshow2" my-slideshow>
    <p class="slide" ng-repeat="news in news">{{news.text}}</p>
  </div>


//works just fine

  <div id="slideshow" my-slideshow>
    <img class="slide" ng-src="{{image}}" ng-repeat="image in images" />
  </div>

MODULE

angular.module('myApp', [])

.directive('mySlideshow', function () {
    return {
       restrict: 'AC',
      link: function (scope, element, attrs) {
        var config = angular.extend({
          slides: '.slide'
        }, scope.$eval(attrs.mySlideshow)); 
        setTimeout(function () {
         element.cycle(config);
        }, 0);
      }
    };
});

CONTROLLER

.controller('myController', function ($scope){
  $scope.images = [
    'http://malsup.github.io/images/p1.jpg',
    'http://malsup.github.io/images/p2.jpg',
    'http://malsup.github.io/images/p3.jpg',
    'http://malsup.github.io/images/p4.jpg'
  ];
  $scope.news = []; //is filled on init with a $http request
})

使用cylce 2，jQuery和angularJs通过div循环使用ng-repeat

HTML

MODULE

CONTROLLER

0 个答案: