Question

有一个jquery.minicolors插件，我希望使用这个插件的angularified版本。

用法如下：

在页面上，从服务器检索颜色选择器的打开数据（十六进制颜色和不透明度）。
然后，这些值用于＆＃34;构建＆＃34; colorpicker（使其颜色和不透明度等于从服务器接收的值）。
然后用户可以点击选择器并更改颜色和不透明度。结果必须反映在相应的$ scope变量中。

我通过ng-model绑定了颜色十六进制值，它就像一个魅力，但我有不透明的麻烦。我尝试将ng-attr-用于data-opacity属性，但是当我手动更改不透明度时，结果不会被发送＆＃34;回到范围变量..

<input minicolors="options" ng-model="thecolor" ng-attr-data-opacity="{{opacity}}">

为了证明这一点，我创建了一个带有描述的plunker demo。

Answer 1

问题是输入字段仅绑定到颜色部分。如果您在输入中添加ng-change，您将看到只有在更改颜色时才会触发此更改，但在不透明度更改时则不会触发。

您应该将代码移动到指令中。在这里，您可以使用minicolors中的“change”eventHandler，如另一个问题Minicolors AngularJS和docs

所述

更新

如果你看一下代码

http://kaihenzler.github.io/angular-minicolors/angular-minicolors.js

似乎更改事件存在，但只绑定十六进制值。

    var settings = getSettings();
    settings.change = function (hex) {
      scope.$apply(function () {
        ngModel.$setViewValue(hex);
      });
    };

我猜它应该是。

    var settings = getSettings();
    settings.change = function (hex,opacity) {
      scope.$apply(function () {
        ngModel.$setViewValue(hex);
      });
    };

但不透明度不会传递给任何值。看起来像指令中的错误。如果使用console.log（不透明度），则可以看到值更改。

更新2。

简单的修复

    settings.change = function (hex,opacity) {
      scope.opacity = opacity
      scope.$apply(function () {
        ngModel.$setViewValue(hex);
      });
    };

Answer 2

经过多次尝试，我设法修改源代码，以便能够将不透明度值双向绑定到我想要的变量。这是modified plunker。

我已添加的内容：

首先，我们通过传入额外的watch-opacity="varname"属性来修改标记，以定义应该保存初始不透明度值的变量。当我们更改不透明度滑块时，也会更改此变量，反之亦然 - 当新数据写入此变量时（例如，从服务器接收的数据），不透明度滑块会发生变化。

<input minicolors="options" ng-model="thecolor" data-opacity="" watch-opacity="settings.somewhat.opacity">

然后我们从我们的设置中获取不透明度值，并要求minicolors将其用作现在的不透明度，或者如果变量没有值则使用1.0。

var opacity = scope.$eval(attrs.watchOpacity) || "1.0";
element.minicolors('opacity', opacity);

然后我们修改我们的onchange函数，以便在由于不透明度滑块更改而更改不透明度时，我们的不透明度设置变量也会更新：

var settings = getSettings();
settings.change = function (hex, opacity) { // <- fix!
  scope.$apply(function () {
    ngModel.$setViewValue(hex);
    $parse(attrs.watchOpacity).assign(scope, opacity); // <- fix!
  });
};

那就是它！这样我们就可以为每个颜色选择器定义变量，该变量将保持不透明度值并通过滑块将任何不透明度变化绑定到它。

Answer 3

您可以使用属性监视：的（编辑）的

// Template <input minicolors="options" ng-model="thecolor"> // Controller: $("input[minicolors]").each(function() { var $self = $(this); $scope.$watch( function() { return $self.attr("data-opacity"); }, function(opacity) { $scope.opacity[ $self.index() ] = opacity; }); });

将data-opacity属性绑定到范围变量

3 个答案: