Create custom element tag Color Code Picker , which will shows the code of a color by selecting the color in the picker in HTML5

In this article we are going to create a custom element which will pickup the code of a color in the HTML5

Output:

Output After selecting value

Now create a directive for this

Code:

   var ngControls = angular.module('ngControls',[]);

    ngControls.directive('colorCodePicker', function () {

        return{

            restrict:'E',
            tranclude:true,
            template:'<input ng-model="colorvalue" type="color" />'+<div>
                '<notify-indicator bgcolor="{{colorvalue}}" data="colorvalue" 
                  element-type="square">' +
                '</notify-indicator>'+
                '</div>',
            scope:{
                color:'='
            },

            link: function (scope) {

                function Apply(scope, fn) {
                 (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
                }

                scope.colorvalue = '';
                function AssignColor() {
                    Apply(scope, function () { scope.colorvalue = '#8080ff'; });
                }

                AssignColor();

                scope.$watch('color', function () {
                    if(scope.color!=undefined){ scope.colorvalue = scope.color; }
                    else{ scope.colorvalue = "#8080ff"; }
                });

            }

        }

    });

For full detail about the notify-indicator tag,please read the following link. notification-indicator

Controller:

valueApp.controller('sample',function($scope){
    $scope.colorvalue = '#800040';
}

HTML:

From the above you can see how to use the colorcodepicker tag in HTML5