使用角度1.5 $范围

Question

我有一个定时器，使用$interval从数字倒数到零。

目标是使用这个白色的计时器 - 慢慢将其变为红色，让用户了解它的重要性。

我喜欢更好的主意，但到目前为止 - 我尝试过的方法是使用rgba(255, 255, 255, 1)然后使用$scope.x＆amp; rgba(255, {{x}}, {{x}}, 1)并将x从255降为0，这将产生红色。

在浏览器控制台中，我可以看到内联样式按照我的预期递增，但样式不会显示在元素上。

我已经尝试了style="background-color: {{y}}"和ng-style="{ 'background-color': rgba(255, {{x}}, {{x}}, 1) }"，但我没有得到任何东西出现在前端。

在某些组合中，控制台会显示相互矛盾的style=""和ng-style=""。

请解释我可能会误入歧途的地方 - 或者您是否认识到可能导致工作方式与预期不同的边缘情况。

UPDATE：

经过Sk的一些澄清后。 Tajbir和Diego，我不再尝试使用ngStyle -

标记

  <div
    ng-if="ctrl.countdown >= 0"
    class="time" rel="medium-up"
    ng-hide="ctrl.selectedAnswer"
    style="background-color: rgba(255, {{countDownColor}}, {{countDownColor}}, 1);">
    <span>{{ctrl.countdown | secondsToDateTime | date:':ss'}}</span>
  </div>

由于移动断点，它有2个版本 - 以及它的父相对容器等（这不是最好的选择 - 但它是当前的原因）--- rel允许一次显示一个。我把它们排除在外，没有任何改变，所以我不认为它们起了作用。有ngHide - 但不知道这会如何影响颜色。

JS

...
$scope.countDownColor
ctrl.countdownTimer = $interval(function () {
    if ( ctrl.countdown < 11 && ctrl.countdown > 0 ) {
        $scope.countDownColor = 255 * (ctrl.countdown / 10);
    } else if (ctrl.countdown === 0) {
        ctrl.selectAnswer(ctrl.timesUpAnswer);
    }
    ctrl.countdown--;
}, 1000);
...

倒计时在前端按预期工作，计算出的countDownColor在控制台标记中显示如下：

Answer 1

主要使用ng-style进行动态样式设计。例如，在按钮单击中，您想要更改元素的一组样式，这种情况可以使用ng-style。

但通常在您的情况下，您可以使用普通样式属性并使用{{}}来绑定动态值。我为你创建了一个小型演示。希望它对你有所帮助。感谢。

angular.module("app", []).controller("appCtrl", function($scope) {
  $scope.x = 200;
  $scope.y = "200";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appCtrl">
    <label style="color: rgba(100, 0, {{x}}, 1);">Hello World!</label>
    <br/>
    <label ng-style="{'color': 'rgba(100, 0, {{y}}, 1)'}">Hello Universe!</label>
    <br/>
    <button ng-click="x=x-10">Drop X</button>
    {{x}}
  </div>
</div>

Answer 2

你可以使用风格。 e.g。

$scope.color = 255;

  $interval(function() {
            if($scope.color>0){
              $scope.color = $scope.color - 25.5;
            }
          }, 1000);

控制器：

var module = require(pathToModule);