范围之间的双向数据绑定

Question

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

除了共享相同模型时能够使它们一起移动之外，我已经完成了所有工作。

查看柱塞

在上面的“ 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
}

这是一个叉形的矮人

更新资料

矮人

由于目标是消除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 个解决方案

解决方案1
1 已采纳 2015-07-16 21:25:01

的HTML

isColorPicker.js

更新资料

的HTML

isColorPicker.js

范围之间的双向数据绑定

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-07-16 21:25:01

的HTML

isColorPicker.js

更新资料

的HTML

isColorPicker.js

解决方案1
1 已采纳 2015-07-16 21:25:01