javascript - 设置 div 背景颜色的 Angular 指令

Question

假设我有一个 div 元素:

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

如何编写 Angular Directive(指令)以使背景取决于我的输入？

例如我尝试过:

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

带有指令:

.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
        }

      });
    }
  }
})

但这并不完全有效。我认为问题出在模板的某个地方。

Answer 1

您应该查看 Angular documentation on directives 。看起来您的问题的一部分是您尝试使用属性指令插入模板。如果您想插入模板，您需要指定一个元素指令。