angularjs - 在模板中使用光滑的轮播

Question

我们的客户要求我们实现 kenWheeler 光滑旋转木马:http://kenwheeler.github.io/slick/

由于我们的项目是使用 AngularJs 构建的，我们发现以下指令可以作为插件的包装器。 https://github.com/vasyabigi/angular-slick

该指令在模板内调用如下:

<slick dots="true" slides-to-show=3>
    <div ng-repeat="index in question.getProperty().getDynamicData().getIndexes()">
        <span>
            <img ng-src="{{builtPathToImage(question.getProperty().getDynamicData().getImage($index))}}">
        </span>
        <span>{{question.getProperty().getDynamicData().getLabel($index)}}</span>
    </div>
</slick>

在代码中调用模板时， div是动态创建的。该指令运行，并且 div 彼此重叠显示。

编辑:

div carroussel 里面是页面加载后创建的

根据我的研究，问题可能在于页面加载时指令为“空”这一事实。

Plunkr : http://plnkr.co/edit/EdKT8W?p=preview单击“搞砸”按钮以重新创建问题。

编辑结束

关于上下文的更多信息:
该项目使用 require.js
Angular 引导

有没有人在模板中使用这个指令？如果是这样，您能否提供一些有关如何使其工作的指针。

谢谢

Answer 1

发生这种情况的原因是插件本身极大地修改了由 ngRepeat 生成的 html。使 angular 无法更新中继器，因为它不再能够识别结构。

为了防止在更新中继器时 Angular 混淆，您可以:

取消初始化插件

更新您的中继器

重新初始化插件。

我在这里有一个工作示例:

http://plnkr.co/edit/ZQrDZ3Nr33S95Y4uy1AZ?p=preview

它修改了 angular-slick.js通过添加 slickApply 来稍微包装一下方法，以便您可以在 Controller 中轻松执行此操作。

更改:

Angular 光滑.js

    touchThreshold: '@',
    vertical: '@',
    slickApply: '='  // this is the two way binding that changes the interface
  },
  link: function (scope, element, attrs) {
    var initializeSlick, isInitialized;
    var slider; // slider has been moved from the initializeSlick function to here
    /* 
      This function takes another function as an argument 
       and will reset the slick plugin, call the function, and reload it
    */
    scope.slickApply = function(apply){
        if (isInitialized) {
            slider.unslick();
        }
        apply();
        initializeSlick();
    }
    initializeSlick = function () {
      return $timeout(function () {
        var currentIndex;
        slider = $(element);

index.html

这里唯一改变的是添加了 slick-apply属性，引用 slickApply $scope 中的函数

<h1>Hello Plunker!</h1>
<slick init-onload="false" slick-apply='slickApply' data="dataLoaded" slides-to-show="3" dots="true">
  <div ng-repeat="item in items">
    <span>

脚本.js

这里唯一改变的是包装 $scope.items 的赋值。进入 $scope.slickApply功能。

$scope.messItUp = function(){
    $scope.slickApply(function(){
      $scope.items = [
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 1'},
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 2'},
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 3'},
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 4'},
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 5'},
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 6'},
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 7'},
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 8'},
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 9'},
          {imgSrc: 'http://lorempixel.com/325/325/sports/', label: 'label 10'}
      ]  
    });
}

您也可以在不修改包装器的情况下完成所有这些操作，但这需要您在 Controller 内部执行笨拙的 jQuery/angular 操作，如 miron 所示:

http://plnkr.co/edit/WCEWwgNcIEC0rseaZIO6?p=preview

我认为您绝对可以对前一个示例进行改进，特别是通过修改包装器，以便它可以了解 Angular 集合，目前它不这样做。但这显然比我在这里提供的热修复要多得多。

如果您打算在整个代码中更多地使用这个 slick 库，我绝对建议您 fork git repo，以便您可以以更可控的方式对其进行任何其他更改。

但是，由于整个包装器实际上是 1 个文件，其中甚至没有 100 行代码，因此我认为直接在您的代码库中采用它并没有任何问题。
但是，如果您想合并上游更改，我建议将其保留为 CoffeeScript 。但是编译后的输出看起来并不可怕，所以我猜它并不重要。