Custom Styling Directive for Bootstrap

Custom Styling Directive for Bootstrap

(function(module){
  
  var setupDom = function (element){
    var input = element.querySelector("input, textarea, select, custom-directive");
    var type = input.getAttribute("type");
    if (type !== "checkbox" && type != "radio"){
      input.classList.add("form-control");
    } //we can add an else to add different classes for radio and checkbox since 
      //form-control doesn't render nicely with these 2 input types
      
      var label = element.querySelector("label");
      label.classList.add("control-label");
      element.classList.add("form-group");
  };
  
  var link = function(scope, element){
    setupDom(element[0]);
  };
  
  var forminput = function(){
    return {
      restrict: "A",
      link: link
    };
  };
}(angular.module("forms")));

HTML use of the directive

<form name="profileForm" ng-model="model.submit()">
  <div forminput>
    <label for="username">Your user name:</label>
    <input type="text" id="username" name="username" placeholder="User name" ng-model="model.user.username">
    <custom-directive id="custom" name="custom" value="model.user.custom"></custom-directive>
  </div>
</form>

This was an excellent idea from Scott Allen - AngularJS Playbook that I decided to bookmark for future use