JSFiddle - React, Tailwind, and code Playground

by Julien Roy

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://bgrins.github.com/spectrum/spectrum.css">
<script src="http://bgrins.github.com/spectrum/spectrum.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="DemoCtrl">
    <input type="text" class="viseo-color-picker" ng-model="color" />
    <input type="text" viseo-color-picker ng-model="color" color-picker-options="{ flat: true, showInput: true, showAlpha: true }" />
    
    <div>Color : {{color}}</div>
</div>

JavaScript

angular.module('myApp', [])
    .directive('viseoColorPicker', [function () {
    return {
        scope: {
            colorPickerOptions: '=',
            ngModel: '='
        },
        restrict: 'AC',
        link: function ($scope, $element, $attrs) {
            var defaultOptions = {
                color: $scope.ngModel,
                change: function (col) {
                    $scope.$apply(function () {
                        $scope.ngModel = col.toHexString();
                    });
                }
            };

            var options = angular.extend(defaultOptions, $scope.colorPickerOptions);

            $scope.$watch('ngModel', function (newVal) {
                options.color = newVal;
                $($element).spectrum(options);
            });

            $($element).spectrum(options);
        }
    };
}]).controller('DemoCtrl', function ($scope) {
    $scope.color = '#CCC';
});