我使用以下插件:http://vasyabigi.github.io/angular-slick/
我也在使用ng-repeat,所以我的体验是它在ng-repeat完成之前执行。
有什么办法可以解决这个问题吗?
<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>
这不起作用,但如果我删除重复器并复制粘贴代码两次,它就可以工作了。
任何想法如何使ng-repeat的工作,或者我如何能得到光滑的插件等待,直到它完成加载?
编辑:如果我执行<slick init-onload="true" data="vm.carfactory"
,那么我得到以下错误:
slider.unslick is not a function
edit: my controller is using angular.module('garage',['slick'])
我的假设是在ng-repeat
中的项目被渲染之前调用slick。当ng-repeat
完成渲染时,您可以使用以下代码示例尝试(重新)执行slick()
函数:
<div ng-repeat="carfactory in vm.carfactory" ng-init="$last && reloadSlick()">
$last
变量确保只对最后一项(一次)调用函数。
作为安全措施,您可以将reloadSlick()
中的代码与setTimeout()
包装在一起,以便其执行等待下一个事件循环。
$scope.reloadSlick = function() {
setTimeout(function() {... code here ...})
}
关于ng-repeat
渲染回调的更多参考:
- 当ng-repeat完成时调用函数
- ng-repeat finish event