如何风格的浏览器使用自定义指令在angularjs

Question

我只是想样式里面我是用http://uniformjs.com与angularjs jQuery插件的复选框Unform 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 （） 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 

    } 

我有uniform.default.css和jquery.uniform.js已经到位。

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

Answer 1

你缺少els说法，当你调用Layout.initUniform()

由于指令的链接功能已经暴露元素作为一个jQuery对象时，jQuery库在页面角库之前包括你并不真的需要你的布局功能

你handleUnform功能中有几个缺点。

要检查plugun的存在应该做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();       
      } 
     } 
    }; 
});