javascript - Angular directive to set background color of a div -

let's have div element:

<div id="wrapper">    text </div> 

how write angular directive such background depends on input?

for example tried:

<div id="wrapper" color temperature="51">    text </div> 

with 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 , defined         }        });     }   } }) 

but not work. think issue somewhere in template.

you should check out angular documentation on directives. looks part of problem you're trying insert template using attribute directive. if want insert template need specify element directive.