角度目录滑动执行 [英] angular directory slick execution

问题描述

我正在使用以下插件： http://vasyabigi.github.io/angular-slick /

I'm using the following plugin: http://vasyabigi.github.io/angular-slick/

我也在使用ng-repeat，所以我遇到它在ng-repeat完成之前正在执行。

I'm also using ng-repeat, so I'm experiencing that it's executing before the ng-repeat is done.

有没有办法解决这个问题？

Is there any way to fix that?

<slick><div ng-repeat="carfactory in vm.carfactory">
        <h4> {{ carfactory.name }}</h4>
        <p>
            <img src="/biler/1.png" style="float: left; padding: 15px; max-width: 100px; height: auto; margin-bottom: 26px;">
        </p>

        <p><b>Pris:</b> {{ carfactory.price | currency }} kroner</p>
        <p><b>Eier:</b> <a href="/">{{ carfactory.ownerid }}</a></p>

        <p>
            <b>Beskyttelse:</b> {{ carfactory.protection }}</p><p><b>Antall igjen:</b> <span id="antall_1">{{ carfactory.amount }}</span>
        </p>

        <p class="hotel-out">
            <input ng-show="carfactory.amount > 0" class="btn btn-block" ng-click="vm.purchasecar(carfactory)" type="submit"value="Kjøp bil!">
            <p class="hotel-in alert alert-warning" ng-show="carfactory.amount <= 0">Gå ut av hotell for å kjøpe en bil.</p>
        </p>
</div></slick>

这不起作用，但如果我删除转发器并复制+粘贴代码两次工作。

That doesn't work, but if I remove the repeater and copy+paste the code two times it works.

任何想法如何使ng-repeat工作，或者我如何让光滑插件等到它完成加载？

Any idea how to make the ng-repeat work, or how I can get the slicker plugin to wait until it is finished loading?

编辑：

如果我执行< slick init-onload =truedata =vm。 carfactory然后我收到以下错误：

if i perform <slick init-onload="true" data="vm.carfactory" then i get the following error:

slider.unslick is not a function

编辑：我的控制器正在使用angular.module（'garage'，['slick']）

edit: my controller is using angular.module('garage',['slick'])

推荐答案

我的假设是在 ng-repeat 中的项目被渲染之前调用了光滑。当 ng-repeat 使用以下代码示例完成渲染时，您可以尝试（重新）执行 slick（）函数：

My assumption is that slick is called before the items in ng-repeat are rendered. You can try (re)executing the slick() function when the ng-repeat finishes rendering using the following code sample:

<div ng-repeat="carfactory in vm.carfactory" ng-init="$last && reloadSlick()">

$ last 变量确保仅为最后一项（一次）调用该函数。

$last variable ensures that the function is called only for the last item (one time).

作为安全措施，您可以使用 setTimeout（） reloadSlick（）中c $ c>所以它的执行等待下一个事件循环。

Just as a safety measure you can wrap the code in reloadSlick() with setTimeout() so its execution waits for the next event loop.

$scope.reloadSlick = function() {
  setTimeout(function() {... code here ...})
}

更多关于 ng-repeat 引用回调的参考文献：

More references about ng-repeat rendering callback:

• 在ng-repeat完成后调用功能


• ng-repeat完成活动

• Calling a function when ng-repeat has finished
• ng-repeat finish event

这篇关于角度目录滑动执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！