app.js

(function() {
  angular.module('flatuiApp', ['flatuiApp.controllers', 'flatuiApp.directives']);
  angular.module('flatuiApp.controllers', []);
  angular.module('flatuiApp.directives', []);
})();

Flat UI directives.md

##Angular directives for Flat UI

• checkboxes
• radio buttons
• switches

Check the JSFiddle

###Example

Sample index.html app.js and controller demonstate the directives' usage.

To try it out: download the Gist, untar and serve

python -m SimpleHTTPServer

Note: Don't load Flat UI's checkbox, radio or switch javascript files

flatui.controllers.js

(function() {
  angular.module('flatuiApp.controllers')
    .controller('FlatUICtrl', [
      '$scope', function($scope) {
        $scope.checkbox1 = {};
        $scope.checkbox1.options = [
          {
            "name": "check1",
            "id": 1,
            "selected": true
          }, {
            "name": "check2",
            "id": 2,
            "selected": false
          }
        ];
        $scope.radio1 = {};
        $scope.radio1.options = [
          {
            "name": "radio1",
            "id": 1
          }, {
            "name": "radio2",
            "id": 2
          }, {
            "name": "radio3",
            "id": 3
          }
        ];
        $scope.radio1.selected = $scope.radio1.options[0].id;
        $scope.switch1 = false;
      }
    ]);
})();

flatui.directives.js

(function() {
  angular.module('flatuiApp.directives')
    .directive("flatuiRadio", function() {
      return {
        restrict: "AE",
        template: '<label ng-class="{\'checked\': model == value, \'disabled\': disabled}" class="radio">{{label}}<span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" ng-model="model" ng-disabled="disabled" ng-value="value" ng-required="required" name="name"/></label>',
        replace: true,
        scope: {
            model: "=",
            label: "=",
            value: "=",
            required: "=",
            name: "=",
            disabled: '@'
        },
        compile: function(element, attrs) {
            if (attrs.disabled === void 0) {
                attrs.disabled = false;
            } else {
                attrs.disabled = true;
            }
        }
        };
    })
  .directive("flatuiCheckbox", function() {
    return {
      restrict: "AE",
      template: '<label ng-class="{\'checked\': model, \'disabled\': disabled}" class="checkbox">{{label}}<span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input type="checkbox" ng-model="model" ng-disabled="disabled" ng-value="value" ng-required="required" name="name"/></label>',
      replace: true,
      scope: {
        model: "=",
        label: "=",
        value: "=",
        required: "=",
        name: "=",
        disabled: "@"
      },
      compile: function(element, attrs) {
        if (attrs.disabled === void 0) {
          attrs.disabled = false;
        } else {
          attrs.disabled = true;
        }
      }
    };
  })
  .directive('flatuiSwitch', function() {
    return {
      restrict: 'AE',
      template: '<div ng-click="model = disabled && model || !disabled && !model" ng-class="{\'deactivate\': disabled, \'switch-square\': square}" class="switch has-switch"><div ng-class="{\'switch-off\': !model, \'switch-on\': model}" class="switch-animate"><span ng-bind="onLabel" class="switch-left"></span><label>&nbsp</label><span ng-bind="offLabel" class="switch-right"></span></div></div>',
      replace: true,
      scope: {
        model: '=',
        disabled: '@',
        square: '@',
        onLabel: '@',
        offLabel: '@'
      },
      compile: function(element, attrs) {
        if (attrs.onLabel === void 0) {
          attrs.onLabel = 'ON';
        }
        if (attrs.offLabel === void 0) {
          attrs.offLabel = 'OFF';
        }
        if (attrs.disabled === void 0) {
          attrs.disabled = false;
        } else {
          attrs.disabled = true;
        }
        if (attrs.square === void 0) {
          attrs.square = false;
        } else {
          attrs.square = true;
        }
      }
    };
  });
})();

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>FlatUI AngularJS Template</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="//designmodo.github.io/Flat-UI/css/flat-ui.css">
    <!--HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file.-->
    <!--[if lt IE 9]-->
    <script src="//designmodo.github.io/Flat-UI/js/html5shiv.js"></script>
    <!--[endif]-->
  </head>
  <body ng-app="flatuiApp">
    <div ng-controller="FlatUICtrl" class="container">
      <div class="row">
        <div class="col-md-2">
        <flatui-checkbox ng-repeat="item in checkbox1.options" model="item.selected" label="item.name" value="item.id" name="valcontainer0"></flatui-checkbox>
        </div>
        <div class="col-md-2">
          <flatui-checkbox ng-repeat="item in checkbox1.options" model="item.selected" label="item.name" value="item.id" name="valcontainer0" disabled=""></flatui-checkbox>
        </div>
        <div class="col-md-2">
          <flatui-radio ng-repeat="item in radio1.options" model="radio1.selected" label="item.name" value="item.id" name="valcontainer1"></flatui-radio>
        </div>
        <div class="col-md-2">
          <flatui-radio ng-repeat="item in radio1.options" model="radio1.selected" label="item.name" value="item.id" name="valcontainer1" disabled=""></flatui-radio>
        </div>
        <div class="col-md-2">
          <flatui-switch model="switch1"></flatui-switch>
        </div>
        <div class="col-md-2">
          <flatui-switch model="switch1" square="" disabled=""></flatui-switch>
        </div>
      </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="/app.js"></script>
    <script src="/flatui.controllers.js"></script>
    <script src="/flatui.directives.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery-1.8.3.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery.ui.touch-punch.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/bootstrap.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/bootstrap-select.js"></script>
    <!-- These three are replaced -->
    <!-- <script src="//designmodo.github.io/Flat-UI/js/bootstrap-switch.js"></script> -->
    <!-- <script src="//designmodo.github.io/Flat-UI/js/flatui-checkbox.js"></script> -->
    <!-- <script src="//designmodo.github.io/Flat-UI/js/flatui-radio.js"></script> -->
    <script src="//designmodo.github.io/Flat-UI/js/jquery.tagsinput.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery.placeholder.js"></script>
    <script src="//vjs.zencdn.net/4.3/video.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/application.js"></script>

</body>
</html>