CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directivejquery-uniform
skip
skip

Reputation: 12673

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

I simply want to style an checkbox for which I am using http://uniformjs.com jquery plugin with the angularjs.

Here is the checkbox input element I want to style with the plugin:

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

Here is the cutom directive I've written for that:

    myApp.directive('pluginUniform', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                Layout.initUniform();
            }
        };
    });

Here is Layout.initUnform() code:

    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

    }

I've got uniform.default.css and jquery.uniform.js in place already.

Could somebody tell me how could I style the browsers default checkbox style to to the http://uniformjs.com jQuery plugin checkbox style in angularjs using a custom directive?

Upvotes: 0

Views: 855

Answers (1)

charlietfl
charlietfl

Reputation: 171690

You are missing els argument when you call Layout.initUniform()

Since the link function of directive already exposes the element as a jQuery object when jQuery library is included before angular library in the page you don't really need your Layout function

Your handleUnform function has several flaws in it.

To check existence of a plugun should do if($.fn.pluginName). Also, if you had many elements with this directive bound to it you would be looping through all of them each time the directive runs.

Try this:

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

Upvotes: 1

Related Questions