Question

我们说我有一个div元素：

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

如何编写角度指令，使背景取决于我的输入？

例如我试过：

<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

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

Answer 2

请您解释一下您面临的问题。因为我从上面提供的代码中理解的是让你说你有一个输入字段，每当你改变该字段中的值时，背景应该根据 $ watch 函数中的条件而改变。 / p>

所以，如果是这种情况，我们假设我们的控制器包含如下代码：

.controller('Main', function($scope){

  $scope.myInputValue = 20;

})

并使用ngModel指令将输入字段绑定到范围属性 myInputValue ，如下所示：

<input ng-model="myInputValue" />

现在您要做的只是在指令中使用该属性

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

就是这样。

用于设置div的背景颜色的Angular指令

2 个答案: