Imagine having a div element:
<div id="wrapper">
some text
</div>
How can you create an angular directive that changes the background based on user input?
For instance, you might have tried:
<div id="wrapper" color temperature="51">
some text
</div>
and used this directive:
.directive('color', function() {
return {
restrict: 'A',
replace: true,
scope: {
temperature: '='
},
template: '<div ng-class="temperatureCSS">Test</div>',
link: function($scope) {
$scope.$watch('temperature', function(v) {
if(!v) { return; }
var temperature = v;
console.log("temperature", v)
if(temperature > 31) {
$scope.temperatureCSS = "redCSS" // redCSS works and is defined
}
});
}
}
})
However, there seems to be an issue in the template causing it not to work as expected.