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

How to style browsers default checkbox with Unform jQuery plugin using custom directive in angularjs

本文关键字：设置 插件 jQuery 浏览器 Unform 复选框 默认 样式 使用 angularjs 何使用      更新时间：2023-09-26

我只想为我正在使用的复选框设置样式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.intUnform（）代码：

    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使用自定义指令在angularjs中查询插件复选框样式？

调用Layout.initUniform() 时缺少els参数

由于当页面中角度库之前包含jQuery库时，指令的链接函数已经将元素公开为jQuery对象，因此您实际上不需要布局函数

你的handleUnform函数有几个缺陷。

要检查plugun的存在，应该执行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();                          
           }
        }
    };
});
相关文章：