In this article we are going to create a custom element which will pickup the code of a color in the HTML5
Output:
Now create a directive for this
Code:
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
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
No comments:
Post a Comment