a simple color picker input directive in angular

Question

I have ten colors, I want to write a directive that shows 10 boxes with these colors and user picks one of these colors, I want it to be like this: colors is an array of colors in hex

Here is what I come up till now:

(function (angular) {
    "use strict";
    angular.module('color-picker', [])
        .directive('colorPicker', function () {
            return {
                restrict: "E",
                scope: {
                    colors: "="
                },
                templateUrl: "color-picker.html",
                link: function (scope, elem, attrs) {
                    scope.setColor = function(color) {
                        scope.selectedColor = color;
                    }
                }
            }
        })

})(angular);

and here is the template:

<div>
    <div class="color-box" ng-repeat="color in colors">
        <div class="color" ng-style="{'background-color': color}" ng-click="setColor(color)">
        </div>
        <div class="color-name text-center">
            #{{color}}
        </div>
    </div>
</div>

what should I do in order to make it ngModel wise? like a regular input with validation and data binding?

@KaushalNiraula If you look at directive I want to use ng-model for getting color picked from my directive. — Rathma
– Rathma, Commented Aug 18, 2016 at 7:45

Community · Accepted Answer · 2017-05-23 10:28:38Z

1

In directive scope and two-way binding for selectedColor

scope: {
    colors: "=",
    selectedColor: "="
},

When using the directive:

<color-picker colors="<color_list_var>" selected-color="<selected_color_var>"></color-picker>

If you want to use it inside form with input and ngModel, then check this link. So the directive will be like:

app.directive('colorPicker', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      element.colorPicker({
        // initialize the color to the color on the scope
        pickerDefault: scope.color,
        // update the ngModel whenever we pick a new color
        onColorChange: function(id, newValue) {
          scope.$apply(function() {
            ngModel.$setViewValue(newValue);
          });
        }
      });

      // update the color picker whenever the value on the scope changes
      ngModel.$render = function() {
        element.val(ngModel.$modelValue);
        element.change();                
      };
    }
  }
});

and in HTML

<input color-picker ng-model="project.color">

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Aug 18, 2016 at 7:39

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rathma Over a year ago

If I want to use it inside a form and use required directive does this method still works?

Rathma · Accepted Answer · 2016-08-18 08:33:38Z

Here how I solved my problem:

(function (angular) {
    "use strict";
    angular.module('color-picker', [])
        .directive('colorPicker', function () {
            return {
                restrict: "E",
                require: 'ngModel',
                scope: {
                    colors: "="
                },
                templateUrl: "color-picker.html",
                link: function (scope, elem, attrs, ngModel) {
                    scope.setColor = function (color) {
                        scope.selectedColor = color;
                    };

                    scope.$watch(function () {
                        return scope.selectedColor;
                    }, function (newValue, oldValue) {                            
                        if (newValue === oldValue)
                            return;
                        ngModel.$setViewValue(newValue);
                    })
                }
            }
        })
})(angular);

Community · Accepted Answer · 2017-05-23 12:08:32Z

To make ngModel wise is kind of broad question. But something which I can think of now.

You can call setColor data outside, so your directive will tell what user has selected.

like :

return {
    restrict: "E",
    scope: {
        colors: "=",
        selectedColor: "&"
    },
    templateUrl: "color-picker.html",
    link: function (scope, elem, attrs) {
        scope.setColor = function(color) {
            scope.selectedColor({color: color});
        }
    }
}

So with that you can pass data to your function which will be invoked as user will select value or you can pass selected value to your controller but you may require watch.

You can set some id or some kind of identifier for each your color picker. So with that you can pass that value with user selected value.
As you can have input where user can write regex or you can ask them to select as you have. Like : Fiddle

So with that you can have validation like if user have not written something with in your list or not.

But again everything on you what kind of validation or functionality you want in your directive.

Some examples.

There are many others, so you can check them and get some more idea to develop this directive.

EDIT:

As you have mention, you can use as ngModel as like below. JS:

return {
    restrict: "E",
    scope: {
        colors: "=",
        ngModel: "=selectedColor"
    },
    templateUrl: "color-picker.html",
    link: function (scope, elem, attrs) {       
        scope.setColor = function(color) {
            scope.selectedColor = color;
        }
    }
}

HTML:

<color-picker ng-model="userSelectedColor"></color-picker>

And you want more ways to do same, you can check this SO answer.

thanks for your answer, what should I do If I want to get the selected color through ng-model and bound it to y scope this way?

Collectives™ on Stack Overflow

a simple color picker input directive in angular

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related