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 数据，因此您的指令会告诉用户选择了什么。

喜欢：

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

因此，您可以将数据传递给您的函数，该函数将被调用，因为用户将选择值，或者您可以将所选值传递给控制器，但您可能需要观察。

您可以为每个颜色选择器设置一些 id 或某种标识符。因此，您可以使用用户选择的值传递该值。
正如您可以输入，用户可以在其中编写正则表达式，或者您可以让他们选择。喜欢：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);

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

3 个答案: