0

我将如何在 Angular js 指令中初始化 swiper 库。

特别是当指令使用 ng-repeat 创建幻灯片时

这是我第一次尝试 plukr。
http://plnkr.co/edit/LFV3Y1lxOl8GFmL2M3mP

这里是图书馆
http://www.idangero.us/sliders/swiper/

4

3 回答 3

5

我做到了 :) 请在路由的动态视图中检查angularjs-idangero.us-swiper回购这项工作，并有一个棘手的解决方案来混合 ng-click 和 onSlideClick 下载回购并提取它，复制 angularjs-idangero.us-swiper-master到 xampp htdoc（或 wamp 或任何 Web 服务器）并localhost/angularjs-idangero.us-swiper-master/#/test查看演示

于 2014-08-14T09:42:30.863 回答
3

我最近遇到了同样的问题。在reddit上找到了这个答案：http: //as.reddit.com/r/angularjs/comments/1ksa5k/help_getting_swiper_to_work_in_a_directive_with/

他的解决方案： http ://plnkr.co/edit/JUkBe6tULkWL2Jx343tx?p=preview

用户 deathcarrot 在那里写道： 看起来 swiper 在加载时正在破坏您的 DOM，从而破坏了绑定。在您添加任何内容之前，在您的 swiperDirective 链接函数中运行 swiper({...})，然后在准备好激活它后在 doReady 中运行 mySwiper.reInit()。可能还需要 $watchCollection 您的 ng-repeat 数据和 reInit() 每当它发生变化时，它就会更新幻灯片。

这就是我在项目中使用它的方式：

在 html 文件中，我添加了两个自定义指令（swiper-directive以及swiper-slide整个 swiper-div-thing

   <div class="swiper-container" swiper-directive>
    <div class="swiper-wrapper">
      <div class="swiper-slide" ng-repeat="item in data" swiper-slide>
            {{$index}} : {{item}}
      </div>
    </div>
  </div>

在我的 angular.run 函数中，我向 rootscope 添加了一个函数updateSwiper()：

var mySwiper;
var myApp= angular.module('testApp',[])
    .run( function($log, $rootScope, $http, $templateCache){
          $rootScope.updateSwiper = function () {
              mySwiper.reInit();
          }
    }

我这样定义的指令：

myApp.directive("swiperDirective", ["$rootScope", function($rootScope) {
    return {
        restrict: "A",
        controller: function() {
            this.ready = function() {
                $rootScope.updateSwiper();
            }
        },
        link: function(scope, element, attrs, ctrl) {
            mySwiper = new Swiper(".swiper-container", {
                loop:false
            });
        }
    }
}]);

myApp.directive("swiperSlide", [function() {
    return {
        restrict: "A",
        require: "^swiperDirective",
        link: function(scope, element, attrs, ctrl) {
            if(scope.$last) {
                ctrl.ready();
            }
        }
    }
}]);

所以基本上link: function每个创建的幻灯片都会调用 swiperSlide 指令中的。ng-repeat 中的每个元素都有自己的作用域，只有我们数据数组中的最后一项定义了 $last，所以它显然命中了函数ctrl.ready()。然后这会调用$rootScope.updateSwiper最终重新初始化我们的 swiper 的函数。

有了这个，swiper 非常适用于 angular，也适用于移动设备（phonegap）。所以我希望这就是你要找的...

于 2013-09-12T06:58:08.077 回答
1

我从来没有设法使 tschueggi 解决方案起作用，但我想出了这个：

    .directive('waitForSlider1', function ($timeout){
    return {
        link: function($scope, $element, $attrs) {
            if ($scope.$last === true) {
                $timeout(function() {
                    new Swiper('.swiper-container1',{
                      //Your options here:
                      mode:'horizontal',
                      loop: true,
                      slidesPerView: 1,
                      pagination: '.pagination1'
                    });
                });
            }
        }
    }
})

我现在唯一的问题是 ng-click 不再起作用了。任何想法为什么？

弗雷德

于 2014-03-10T13:56:53.627 回答