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

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

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

Answer 2

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

您可以在外部调用 setColor 数据，因此您的指令会告诉用户 selected.

赞：

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

因此，您可以将数据传递给您的函数，该函数将在用户将 select 值时调用，或者您可以将 selected 值传递给您的控制器，但您可能需要观察。

您可以为每个颜色选择器设置一些 id 或某种 identifier。因此，您可以通过用户 selected value.
因为你可以有 input，用户可以在其中编写正则表达式，或者你可以让他们像你一样 select。喜欢：Fiddle

这样你就可以进行验证，比如用户是否没有在你的列表中写过东西。

但是，一切都取决于你在你的指令中想要什么样的验证或功能。

一些例子。

还有很多其他的，所以你可以检查它们并获得更多的想法来开发这个指令。

编辑：

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

这是我解决问题的方法：

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

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

a simple color picker input directive in angular

validation

input

angularjs

angularjs-directive

angular-ngmodel