我正在将一个jQuery webapp移植到AngularJS(< - beginner!).
为了整合bxSlider和一些模板化的东西,我写了以下指令:
[编辑]最好看看jsFiddle jsfiddle.net/Q5AcH/2/ [/ Edit].
angular.module('myApp') .directive('docListWrapper', ['$timeout', function ($timeout) { return { restrict: 'C', templateUrl: 'partials/doc-list-wrapper.html', scope: { docs: '=docs'}, link: function (scope, element, attrs) { $timeout(function () { element .children('.doc-list') .not('.ng-hide') .bxSlider(); // <-- jQuery plugin doing heavy DOM manipulation }, 100); // <-------------- timeout in millis } }; }]);
没有$timeout
问题,bxSlider无法计算新创建的元素的大小或根本找不到它们.
我有点担心使用长超时值可能会导致闪烁而使用短值可能会导致慢速机器出现问题.
在我的实际应用程序中(当然有更多数据和更多部分而不是jsFiddle)我发现了一些奇怪的东西:
当我使用超时值时,使用10或更多毫秒就足够了,所以jQuery插件bxSlider找到一个完整的DOM.等待时间较少(9毫秒或更少),插件无法正常包装
.
但是仍然存在非常讨厌的闪烁问题.
在小提琴中,可能是由于DOM较小,Chrome + Firefox中只有Internet Explorer 10才会出现闪烁现象.
我不想依赖于经验值,因为$timeout
它可能高度依赖于机器,操作系统,渲染引擎,角度版本,血液预测......
有一个强大的解决方法吗?
我已经找到了一些带有事件监听器($on
,$emit
)的例子,以及使用ng-repeat完成的一些魔术$scope.$last
.如果我可以消除闪烁,我会接受组件之间的一些耦合,即使这不符合AngularJS的野心.