代码之家 › 专栏 › 技术社区 › skip

如何使用angularjs中的自定义指令使用Unform jQuery插件设置浏览器默认复选框的样式

jquery-uniform angularjs-directive angularjs jquery javascript

skip · 技术社区 · 10 年前

我只是想为我正在使用的复选框设置样式 http://uniformjs.com 带有angularjs的jquery插件。

下面是我想用插件设置样式的复选框输入元素:

<label><input type="checkbox" plugin-uniform id="inline">&nbsp;Inline editing</label>

这是我为此编写的cutom指令:

    myApp.directive('pluginUniform', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                Layout.initUniform();
            }
        };
    });

这里是 Layout.initUnform() 代码:

    var Layout = function() {

    //other stuff

            initUniform: function (els) {
                if (els) {
                    jQuery(els).each(function () {
                            if ($(this).parents(".checker").size() == 0) {
                                $(this).show();
                                $(this).uniform();
                            }
                        });
                } else {
                    handleUniform();
                }
            }

    function handleUniform() {
        if (!jQuery().uniform) {
            return;
        }
        var test = $("input[type=checkbox]:not(.toggle), input[type=radio]:not(.toggle, .star)");
        if (test.size() > 0) {
            test.each(function () {
                    if ($(this).parents(".checker").size() == 0) {
                        $(this).show();
                        $(this).uniform();
                    }
                });
        }
    }

    //other stuff

    }

我有 uniform.default.css 和 jquery.uniform.js 已经到位。

有人能告诉我如何将浏览器的默认复选框样式设置为 http://uniformjs.com jQuery插件复选框样式在angularjs中使用自定义指令?

1 回复 | 直到 10 年前

charlietfl 10 年前

你失踪了 els 调用时的参数 Layout.initUniform()

由于当jQuery库包含在页面中的angular库之前时,指令的link函数已经将元素作为jQuery对象公开,因此实际上不需要Layout函数

你的 handleUnform 函数有几个缺点。

检查插件的存在 if($.fn.pluginName) . 此外,如果有许多元素绑定了此指令,则每次运行指令时都会循环遍历所有元素。

试试看:

myApp.directive('pluginUniform', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
           /* element is jQuery object*/
           if (!element.parents(".checker").length) { /* size() is deprecated */
                 element.show().uniform();                          
           }
        }
    };
});

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前