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, Aug 18 '16 at 07:45

score 1 · Accepted Answer · edited May 23 '17 at 10:28

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">

If I want to use it inside a form and use `required` directive does this method still works? — Rathma, Aug 18 '16 at 07:46

score 0 · Answer 2 · edited May 23 '17 at 12:08

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? — Rathma, Aug 18 '16 at 07:48

score 0 · Answer 3 · answered Aug 18 '16 at 08:33

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);

a simple color picker input directive in angular

3 Answers3