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

Question

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

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

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

这是我为此编写的自定义指令:

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

Answer 1

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

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

您的 handleUnform 函数有几个缺陷。

要检查插件是否存在，应该执行if($.fn.pluginName)。 另外，如果您有许多元素与此指令绑定(bind)，那么每次指令运行时您都会循环遍历所有元素。

试试这个:

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();                          
           }
        }
    };
});