如何風格的瀏覽器使用自定義指令在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();       
      } 
     } 
    }; 
});