Custom Directive Code
(function() {
'use strict';
angular
.module('app.colorslider.directive', [])
.directive('colorSlider', [
'$timeout',
'$rootScope',
'ColorSliderService',
function($timeout, $rootScope, ColorSliderService) {
return {
restrict: 'EA',
scope: {
array: '=',
shape: '=',
shapeindex: '=',
type: '='
},
templateUrl: 'views/directive/colorslider.html',
link: function(scope, elem, attrs) {
console.log(scope.type);
scope.fill = {
blue: 128,
green: 128,
red: 128,
opacity: 1
}
scope.stroke = {
blue: 128,
green: 128,
red: 128,
opacity: 1,
width: 1
}
scope.colorSlider = function() {
scope[scope.type].combined = ColorSliderService.rgbToHex(parseInt(scope[scope.type].red), parseInt(scope[scope.type].green), parseInt(scope[scope.type].blue));
console.log(scope[scope.type].combined);
};
}
};
}
]);
}());
HTML Implementation
<color-slider type="'stroke'" shape="selectedshape" array="linesArray" shapeindex="selectedshapeindex"></color-slider>
<color-slider type="'fill'" shape="selectedshape" array="linesArray" shapeindex="selectedshapeindex"></color-slider>
content of colorslider.html
<input class="colorInt" type="text" size="3" id="redInt" maxlength="3" value="{{[type].red}}" style="display: none">
I created the above directive to provide a means for selecting colors for both stroke and fill. The directive attributes allow the passing of the type into the directive's scope.
The directive is loading successfully but I have noticed that the colorslider.html template is not displaying any values. What could be the issue here?
Could it be incorrect to display a value in the directive template like this? value="{{[type].red}}"