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

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

jquery-uniform angularjs-directive angularjs jquery javascript

skip · 技术社区 · 12 年前

我只是想为我正在使用的复选框设置样式 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 回复 | 直到 12 年前

charlietfl 12 年前

你失踪了 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();                          
           }
        }
    };
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前