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

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

jquery-uniform angularjs-directive angularjs jquery javascript

skip · 技术社区 · 11 年前

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

charlietfl 11 年前

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

推荐文章

SK-USA · 无法从ng下拉菜单multiselect指令调用控制器函数

8 年前

Junaid Farooq · 无法使用AngularJs在数字“1”上创建属性“subjects”

8 年前

Neel · 如何在事件广播的超时延迟内停止间隔?

8 年前

BlockchainProgrammer · AngularJS将数据从控制器读取到表

8 年前

mBo · 跟踪窗口上的元素宽度调整角度JS

8 年前

Devin Fields · 有条件删除其他指令的指令

8 年前

Scrumptious · 未知提供程序:serviceProvider->service->myDirective

8 年前

NeverGiveUp161 · AngularJS:ngMessages无法使用select中的ng选项

8 年前

dragonfly · 仅当存在内容时显示弹出窗口

8 年前

NeverGiveUp161 · AngularJs将模型值+模型名称传递给控制器中的函数

8 年前