$ timeout是避免AngularJS指令中jQuery插件呈现问题的唯一/推荐方法吗?

 云妹12241999 发布于 2023-02-11 17:38

我正在将一个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的野心.

撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有