angularjs - 尝试显示自定义颜色选择器

Question

我正在使用 Angular 指令来显示下面的颜色选择器

我正在使用如下指令代码

    (function () {
    'use strict';

    angular.module('ict')
        .directive('colorPicker', ['appConfig', '$rootScope', '$uibModal', '$state',
            function (appConfig, $rootScope, $uibModal, $state) {
                return {
                    scope: {
                        selectedColor: "=",
                        onColorChange: "&",
                        fillType: "="
                    },
                    templateUrl: 'app/partials/directives/color-picker.html',
                    link: function (scope, elem, attr) {
                        scope.colors = angular.copy(appConfig.colorPicker.basicColors);
                        if (!scope.selectedColor) {
                            scope.selectedColor = '#FFFFFF';
                        }
                        scope.changeColor = function (color) {
                            if (color) {
                                scope.selectedColor = color;
                            }
                            scope.onColorChange({ type: scope.fillType, color: scope.selectedColor });
                        }
                    }
                }
            }]);
}());

这是 HTML

<div class="color-pick-box r-item" uib-popover-template="'color-picker.html'"
     popover-class="custom-color-picker" popover-placement="bottom" popover-append-to-body="true"
     popover-trigger="outsideClick">
    <div class="picked-color" ng-style="{'background-color': selectedColor}"></div>
</div>

<script type="text/ng-template" id="color-picker.html">
    <div class="color-input-section">
        <div class="color-input-box" ng-style="{'background-color': $parent.selectedColor}"></div>
        <div class="color-input-hex-field">
            <div class="title">HEX</div>
            <input type="text" ng-model="$parent.selectedColor" class="color-input" ng-change="$parent.changeColor()" />
        </div>
    </div>
    <div class="basic-colors-box">
        <div class="color-box" ng-repeat="color in $parent.colors" ng-click="$parent.changeColor(color)" ng-style="{'background-color': color}">

        </div>
    </div>

</script>

这是用法

<div color-picker selected-color="ctrl.items[ctrl.selectedItemIndexes[0]].style.properties.backgroundColor" fill-type="'background'" on-color-change="ctrl.changeColor(type, color)"></div>

但是，我需要如下所示的颜色选择器，其中可以使用不同的库来选择颜色，但它们都不起作用

我无法用某些选择器(圆圈)显示颜色

Answer 1

在 google 上快速搜索“angularjs color picker”会得到一个库列表，您可以从中进行选择。第一个，angular-color-picker ，看起来正是您要找的东西。 github 上有详细说明可用选项和设置的示例和演示，但下面是快速入门。

你需要包含这个库需要的css和js文件。 github 显示了如何使用 bower 或 npm 执行此操作，或者您可以从 github 下载文件并将它们直接添加到您的项目中。

app.js

angular.module('app', ['color.picker']);

.html

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