我创建了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)
};
}
}],
}
}
最佳答案
因此，问题似乎在于，为每个单独的颜色选择器创建了自己的隔离的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;
}