unable to display hex?

[shuttj]

Any idea why the colorpicker is showing rgb even though I am explicitly choosing hex? http://plnkr.co/edit/GYZCOWoTBsdZ0LOlI0Z0?p=preview

[buberdds]

Hi there, I don't have time for an investigation, but you are passing rgb value to the color picker:

$scope.style = style.sheet.cssRules[0].style; alert($scope.style.color) //empty $scope.style.color = '#000000'; alert($scope.style.color); //rgb(0,0,0) $scope.style = { color: '#000000' } alert($scope.style.color); //#000000

[buberdds]

  style.appendChild($document[0].createTextNode("")); 
  $document[0].head.appendChild(style);

  style.sheet.insertRule(".hello {}", 0); 

  $scope.hex = {
    color: '#000000'
  };

  $scope.$watch('hex.color', function() {
    style.sheet.cssRules[0].style.color = $scope.hex.color;
  }); 

<input colorpicker class="form-control" ng-model="hex.color" type="text"/>

[clouddueling]

This looks like it's happening because you're working with a $document style object which the browser uses to determine the look of an element and forces rgba() by default even when you pass a hex.

Check out lines 13 and 15 of script.js. Also you're putting a bunch of directive logic in a ctrl which is not very scalable. http://plnkr.co/edit/YcGZj1CusoiKvGVjhAsN?p=preview

I recommend you do it like this (quick and dirty way): http://plnkr.co/edit/BSr0SvAliOA1OtPgeQEw?p=preview

A better way would be to make a simple directive that uses isolate scope to bind a color to the color of the text. Then you could use that everywhere in your app.

[shuttj]

Ah, ok. Thank you for the insight.