<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="an Angular directive that wraps spectrum.js">
<title>an Angular directive that wraps spectrum.js</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="//bgrins.github.io/spectrum/spectrum.js"></script>
<script src="//ispringer.github.io/spectrum-angular.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css" rel="stylesheet">
<link href="http://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
padding: 11px;
}
input {
margin-left: 5px;
}
pre {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body ng-controller="controller" ng-cloak>
<tabset>
<tab heading="spectrum">
<pre><code><input spectrum ng-model="color"></code></pre>
<label>Color: <input spectrum ng-model="color"></label>
</tab>
<tab heading="spectrum-flat">
<pre><code><input spectrum ng-model="color" options="{flat: true}"></code></pre>
<input spectrum ng-model="color" options="{flat: true}">
</tab>
</tabset>
</body>
</html>
var app = angular.module('app', ['ui.bootstrap', 'spectrum']);
app.controller('controller', function($scope) {
$scope.showSpectrum = false;
$scope.color = '#397c4a';
});