带有Angular JS的光滑轮播
我在我的一个AngularJS应用程序中使用Slick轮播。 为此,我创建了如下指令:
myApp.directive('slickSlider',function(){ return { restrict: 'A', link: function(scope,element,attrs) { $(element).slick(scope.$eval(attrs.slickSlider)); } } });
这是我在视图文件中的代码:
在这种情况下,它工作正常并正确初始化。
但是当我使用ngRepeat动态创建幻灯片时,它没有初始化并且一个接一个地显示幻灯片。
这是我使用ngRepeat的代码
有任何建议,我该如何解决?
我怀疑光滑的插件可能需要DOM完全渲染才能正常工作。
尝试:
myApp.directive('slickSlider',function($timeout){ return { restrict: 'A', link: function(scope,element,attrs) { $timeout(function() { $(element).slick(scope.$eval(attrs.slickSlider)); }); } } });
$ timeout仍然没有为数据提供足够的时间来初始化我的场景所以我更多地修改了指令以监视数据是否有内容(这也可能在数据发生变化时具有重新绑定的效果,而不仅仅是如果你改变了isInitialized的使用,DOM初始化onLoad:
app.directive('slickSlider', function () { return { restrict: 'A', scope: {'data': '='}, link: function (scope, element, attrs) { var isInitialized = false; scope.$watch('data', function(newVal, oldVal) { if (newVal.length > 0 && !isInitialized) { $(element).slick(scope.$eval(attrs.slickSlider)); isInitialized = true; } }); } } });
这样,angularJS会监视要加载的数据,并且只在数据有长度时才挂起光滑。
(btw $ watch是必要的,而不是$ observe,因为“data”属性不使用插值(“{{…}}”):如果你想得到低点,看看这个好的答案在这。)
用法:
感谢这个答案和我从这个问题得到的这个github
- 如何强制angular使用jqlite或手动引用jquery对象
- 我试图将一个文本区域绑定到一个angularjs变量,并在jsery中使用jquery反映我对文本区域所做的更改
- 当插入符号位于特定div / span / a标记内时,以及当插入符号离开标记时,触发事件
- 在角度js中使用ng-class中的函数
- AngularJS:如何在css类更改时通过切换更改颜色属性?
- AngularJs中的自定义排序
- 在angularjs和jade中使用无限滚动
- 如何在单页应用程序中实现gmail compose窗口概念?
- 在Angularjs中,如何使用ng-repeat,ng-model和ng-click动态更改内容?