角度中的简单颜色选择器输入指令

Question

我有十种颜色，我想编写一个指令，显示 10 个具有这些颜色的框，并且用户选择其中一种颜色，我希望它是这样的： colors 是十六进制颜色数组

这是我到现在为止的想法：

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

这是模板：

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

我应该怎么做才能使它ngModel 明智？像带有验证和数据绑定的常规输入？

Answer 1

使 ngModel 明智是一个广泛的问题。但是我现在能想到的东西。

1. 您可以在外部调用 setColor 数据，因此您的指令将告诉用户选择了什么。

喜欢：

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

因此，您可以将数据传递给您的函数，该函数将在用户选择值时被调用，或者您可以将选定的值传递给您的控制器，但您可能需要监视。

1. 您可以为每个颜色选择器设置一些 id 或某种 identifier。因此，您可以使用用户选择的值传递该值。

2. 您可以有 input，用户可以在其中编写正则表达式，或者您可以要求他们按您的意愿进行选择。 喜欢：Fiddle

因此，您可以进行验证，例如用户是否在您的列表中没有写过东西。

但同样，您需要在指令中使用什么样的验证或功能。

一些例子。

• angular-bootstrap-colorpicker
• Angular-color-picker
• Angular Spectrum Colorpicker

还有很多其他的，因此您可以查看它们并获得更多想法来开发此指令。

编辑：

正如您所提到的，您可以像下面这样使用 ngModel。 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>

如果您想要更多方法来做同样的事情，您可以查看这个SO 答案。

Answer 2

我是如何解决我的问题的：

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

Answer 3

在selectedColor 的指令范围和双向绑定中

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

使用指令时：

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

如果您想在 form 中使用它，并与 input 和 ngModel 一起使用，请检查此 link。所以指令会是这样的：

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

在 HTML 中

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