更新

Question

我创建了3个指令，一个XY区域滑块，一个X滑块和一个使用其他两个指令的ColorPicker指令。

除了能够让他们在共享相同模型时一起移动时，我已经完成了所有工作。

View Plunker

在上面的Plunker中，您可以找到完整的来源，看看我的意思是他们没有正确分享模型。我喜欢这样，当一个滑块移动时，它们都会移动。

这些值在第3版（颜色选择器）指令中正确更新，所以我相信故障所在。

ColorPicker指令：

angular.module('plunker').directive('isColorPicker', IsColorPicker);

IsColorPicker.$inject = [];

function IsColorPicker() {
  'use strict';

  return {
    restrict: 'EA',
    scope: {
      color: '='
    },
    template: [
      '<div class="is-color-picker">',
      '    <div style="background: {{ color.hueHex }}" class="hsv-container">',
      '        <is-xy-field values="xyValues"></is-xy-field>',
      '    </div>',
      '    <div class="hue-container">',
      '        <is-slider max="360" value="hueValue"></is-slider>',
      '    </div>',
      '</div>'
    ].join(''),
    replace: true,
    controller: ['$scope', function($scope) {
      $scope.hueValue = 0;
      $scope.xyValues = {
        x: 100,
        y: 100
      };

      updateColors();

      $scope.$watch('xyValues', function(value) {
        updateColors();
      }, true);

      $scope.$watch('hueValue', function(value) {
        updateColors();
      }, true);

      function updateColors() {
        var hsl = {
          h: parseInt($scope.hueValue),
          s: $scope.xyValues.x / 100,
          v: $scope.xyValues.y / 100
        };

        $scope.color = hsv2rgb(hsl.h, hsl.s, hsl.v);
        $scope.color.hsl = hsl;
        $scope.color.hueHex = hsv2rgb(hsl.h, 1, 1).hex;
      }

      function hsv2rgb(h, s, v) {
        var R, G, B, X, C;
        h = (h % 360) / 60;
        C = v * s;
        X = C * (1 - Math.abs(h % 2 - 1));
        R = G = B = v - C;

        h = ~~h;
        R += [C, X, 0, 0, X, C][h];
        G += [X, C, C, X, 0, 0][h];
        B += [0, 0, X, C, C, X][h];

        var r = R * 255,
          g = G * 255,
          b = B * 255;
        return {
          r: r,
          g: g,
          b: b,
          hex: "#" + (16777216 | b | (g << 8) | (r << 16)).toString(16).slice(1)
        };
      }
    }],
  }
}

Answer 1

所以问题似乎是每个单独的颜色选择器都会创建自己的隔离hueValue范围。您需要从主控制器提供共享的hueValue变量。我对您的代码进行了一些修改，并在下面显示。

HTML

<div class="pickers">
    <is-color-picker color="colorObj" hue-value="colorObj.hsl.h"></is-color-picker>
    <is-color-picker color="colorObj" hue-value="colorObj.hsl.h" class="is-color-picker2"></is-color-picker>
    <is-color-picker color="colorObj" hue-value="colorObj.hsl.h" class="is-color-picker3"></is-color-picker>
</div>

我添加了 hue-value 属性，该属性将在所有颜色选择器之间同步。

isColorPicker.js

scope: {
  color: '=',
  hueValue: "=" //This line is new, this is the hue-value from the html
}

这是一个分叉的plunker

更新

plunker

由于目标是消除HTML代码中的额外色调值，现在看起来像这样：

HTML

<body ng-controller="MainCtrl">
  <div class="pickers">
    <is-color-picker color="colorObj"></is-color-picker>
    <is-color-picker color="colorObj" class="is-color-picker2"></is-color-picker>
    <is-color-picker color="colorObj" class="is-color-picker3"></is-color-picker>
  </div>

   Hue Value: {{ colorObj.hueValue }} <br>
   Hue Color:
   <div style="background: {{ colorObj.hueHex }}" class="hue-preview"></div><br>
   Selected Color: <div style="background: {{ colorObj.hex }}" class="hue-preview"></div>
</body>

所有colorObj现在都包含一个名为hueValue的额外变量，它反映了我们在三个颜色选择器之一中设置的色调。

isColorPicker.js

template: [
  '<div class="is-color-picker">',
  '    <div style="background: {{ color.hueHex }}" class="hsv-container">',
  '        <is-xy-field values="xyValues"></is-xy-field>',
  '    </div>',
  '    <div class="hue-container">',
  '        <is-slider max="360" value="color.hueValue"></is-slider>',
  '    </div>',
  '</div>'
].join(''),

这里的重要变化是它现在说 color.hueValue 而不是 hueValue

此外，控制器初始化更改为：

$scope.xyValues = {
    x: 100,
    y: 100
};
$scope.color = hsv2rgb(0, 1, 1); //This creates the color object so we can assign the needed color.hueValue variable
$scope.color.hueValue = 0;

$ scope。$ watch已更改为：

$scope.$watch('color.hueValue', function(value) {
    updateColors();
}, true);

最后，函数updateColors更改为此

function updateColors() {
  var  hsl = {
      h:  parseInt($scope.color.hueValue),
      s:  $scope.xyValues.x / 100,
      v:  $scope.xyValues.y / 100
  };

  $scope.color = hsv2rgb(hsl.h, hsl.s, hsl.v);
  $scope.color.hsl = hsl;
  $scope.color.hueValue = hsl.h;
  $scope.color.hueHex = hsv2rgb(hsl.h, 1, 1).hex;
}

范围之间的双向数据绑定

1 个答案:

HTML

isColorPicker.js

更新

HTML

isColorPicker.js