colorpicker
colorpicker copied to clipboard
bladepop
Problem showing color list
Hi, i've just try your color picker and this is what is happening.
It only shows the little rectangle on the left. I copy paste the example. If anyone have any idea, i would be very happy :D
I ran into the same issue. The below re-structuring of the directive caused it to work for me in Angular v 1.4.7. Note the removal of the vm from vm.property in the $templateCache.put call.
angular.module('tb-color-picker', [])
.run(['$templateCache', function ($templateCache) {
$templateCache.put('color-picker.tp1.html', '<div class="color-picker">' +
'<div class="selected-color" ng-style="{\'background-color\': color}"></div>' +
'<div class="color-palette">' +
'<div ng-repeat="option in options"' +
'ng-style="{\'background-color\': option}"' +
'ng-class="{\'palette-selected-color\': option == color, \'transparent-color\': option == \'tranparent\'}"' +
'ng-click="changeColor(option)"></div>' +
'</div>' +
'</div>');
}])
.directive('colorPicker', function () {
return {
restrict: 'E',
templateUrl: 'color-picker.tp1.html',
replace: true,
scope: {
color: '=',
options: '=',
onColorChanged: '&',
},
link: function (scope) {
scope.changeColor = function (option) {
var old = scope.color;
scope.color = option;
scope.onColorChanged({ newColor: option, oldColor: old });
}
}
};
});
@JaimeStill thanks for the input :) Is this caused by Angular's version? If your code works on latest version of angular I'll update the master!
@bladepop, it's been quite a while since I messed with it, but I was using angular version 1.4.7 when I made the above adjustment. If I recall correctly, the changes were made to simplify the composition of the directive. Because the controller created in your code was specific to the directive, I just isolated the properties to the directive scope and defined the logic in the link function.
