使用模板里面光滑caroussel [英] Using slick caroussel inside a template

问题描述

我们的客户要求我们实施kenWheeler光滑caroussel： http://kenwheeler.github.io/slick/

Our customer requested that we implement the kenWheeler slick caroussel: http://kenwheeler.github.io/slick/

由于我们的项目与AngularJs建成，我们发现下面的指令，它作为围绕插件的包装。 https://github.com/vasyabigi/angular-slick

Since our project is built with AngularJs we found the following directive that works as a wrapper around the plugin. https://github.com/vasyabigi/angular-slick

该指令是一个模板如下里面调用：

The directive is call inside a template as follow :

<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>

当模板被称为code里面， DIV 的动态创建。该指令运行，股利都在彼此顶部显示。

When the template is called inside the code, the div are created on the fly. The directive is run and the div are display on top of one another.

编辑：

• 的 DIV 里面的页面加载后carroussel创建

• The div inside the carroussel are created after the page is loaded

从我研究这个问题可能是一个事实，即指令是空的加载页面时loacated。

From my research the issue might be loacated in the fact that the directive is "empty" when the page is loaded.

Plunkr： http://plnkr.co/edit/EdKT8W?p=preVIEW CLCK了搞砸了按钮，来重新创建问题。

Plunkr : http://plnkr.co/edit/EdKT8W?p=preview clck the "mess it up" button to recreate the issue.

编辑END

详细了解一下背景：
该项目采用require.js
角引导

A bit more about the context : The project uses require.js Angular bootstrap

你是不是有了outthere所使用的模板这里面deirective？如果是这样，你能提供你如何做它的工作的一些指针。

Is there someone outthere that used this deirective inside a template? and if so, could you provide some pointer on how you made it to work.

感谢

推荐答案

为什么发生这种情况的原因是因为插件本身大幅修改了由 ngRepeat 离去角无法更新中继因为它不再能识别的结构。

The reason why this is happening is because the plugin itself drastically modifies the html that is generated by the ngRepeat leaving angular unable to update the repeater as it no longer can identify the structure.

在为prevent从越来越困惑，当你更新你的中继角度你可以：

In order to prevent angular from getting confused when you update your repeater you could:

• 未初始化插件


• 更新转发


• 重新初始化插件。

我这里的一个工作示例：

I have a working example of that here:

<一个href=\"http://plnkr.co/edit/ZQrDZ3Nr33S95Y4uy1AZ?p=$p$pview\">http://plnkr.co/edit/ZQrDZ3Nr33S95Y4uy1AZ?p=$p$pview

它通过增加一个 slickApply 方法，这样你可以做修改角slick.js 包装只是轻微这从您的控制器很容易。

It modifies the angular-slick.js wrapper only slightly by adding a slickApply method so that you can do this easily from in your controller.

的变化：

角slick.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

的唯一的事在这里改变是增加了光滑申请属性，它引用 slickApply 功能在 $范围

The only thing changed here was the addition of the slick-apply attribute, that references the slickApply function in the $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>

的script.js

唯一此处更改被包装 $ scope.items 的分配到 $ scope.slickApply 功能

The only thing changed here was wrapping the assignment of $scope.items into the $scope.slickApply function.

$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'}
      ]  
    });
}

您也可以做到这一切，而无需修改包装但这需要你做你的控制器内的尴尬的jQuery /角的东西，由米龙在这里所证明：

You could also do all this without modifying the wrapper but that would require you to do awkward jQuery / angular stuff inside your controller, as demonstrated by miron here:

<一个href=\"http://plnkr.co/edit/WCEWwgNcIEC0rseaZIO6?p=$p$pview\">http://plnkr.co/edit/WCEWwgNcIEC0rseaZIO6?p=$p$pview

我想你可以对前者的例子肯定提高，特别是通过修改，以便它可以被告知角藏品的包装，但目前并没有做到这一点。但是，这显然是一个大量的工作那么烫，我在这里提供

I think you could definitely improve on the former example, especially by modifying the wrapper so that it can be made aware of angular collections, currently it doesn't do that. But that is obviously a lot more work then the hot fix I'm providing here.

如果您在使用本光滑库的详细整个code计划，我肯定建议你用叉子叉混帐回购协议，这样就可以在一个更托管的方式介绍给它的任何其他更改。

If you are planning on using this slick library more throughout your code, I definitely recommend you fork the git repo so that you can introduce any additional changes to it in a more managed way.

然而，由于这整个的包装的字面1文件与它甚至不是100行code，我实在看不出任何问题，在你的code采用它基地直接。结果
不过，我会建议保持咖啡的脚本，如果你想在上游的变化不断进行合并。但是，编译后的输出看起来并不可怕所以它并没有真正母校，我猜。

However, since this entire wrapper is literally 1 file with not even 100 lines of code in it, I don't really see any issue with adopting it in your code base directly.
I would however recommend to keep it as coffee script, if you want to ever merge in upstream changes. But the compiled output doesn't look to terrible so it doesn't really mater I guess.

这篇关于使用模板里面光滑caroussel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！