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

快速谷歌搜索＆＃39; angularjs颜色选择器＆＃39;想出了一个你可以选择的库列表。第一个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>

试图显示自定义颜色选择器

1 个答案: