i've created 3 directives, xy area slider, x slider, , colorpicker directive uses 2 other directives.
i've gotten working except being able them move when sharing same model.
in above plunker, can find full source , see mean them not sharing model properly. i'd when 1 slider moves, move.
the values updating in 3rd (color-picker) directive, believe that's fault lies.
colorpicker directive:
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) }; } }], } }
so problem seems each individual colorpicker create own isolated huevalue scope. need main controller provide shared huevalue variable. did modifications code , show below.
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> i've added hue-value attribute synchronized across color-pickers.
iscolorpicker.js
scope: { color: '=', huevalue: "=" //this line new, hue-value html } here forked plunker
update
since goal eliminate hue-value in html code looks this:
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> all colorobj contains variable called huevalue reflects hue have set in 1 of 3 color-pickers.
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(''), the important change here says color.huevalue , not huevalue
further, controller initialization changed to:
$scope.xyvalues = { x: 100, y: 100 }; $scope.color = hsv2rgb(0, 1, 1); //this creates color object can assign needed color.huevalue variable $scope.color.huevalue = 0; the $scope.$watch has changed to:
$scope.$watch('color.huevalue', function(value) { updatecolors(); }, true); finally function updatecolors changed this
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; } 
Comments
Post a Comment