0

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

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

<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.cssjquery.uniform.js了。

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

4

1 回答 1

1

els你打电话时缺少论据Layout.initUniform()

由于指令的链接功能已经将元素公开为 jQuery 对象,当 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();                          
           }
        }
    };
});
于 2014-09-13T20:28:00.947 回答