AngularJS 使用 $interval

Question

我正在尝试使用 AngularJS 中的 $interval 服务来使文本以彩色（红色到黑色）来回闪烁。以下代码不起作用，我不知道为什么。

这是HTML（这道题是跨度部分）。

<div class="jumbo" ng-mouseenter="myStyle = {'background-color':'gold'}" ng-mouseleave="myStyle ={'background-color':''}">
        <h1 ng-style="myStyle">Sanjay Kumar Technology Services <span class="iflash" ng-style ="{{textColor}}">(NodeJS & AngularJS Demo)</span></h1>
</div>

这是.js文件中的AngularJS：

(function () {
    var app = angular.module("SanjayPage", []);

    var MainController = function ($scope, $http, $interval) {

        $scope.textColor = "{'color': 'black'}";
        var change = 1;

        var flash = function () {
            if (change === 1) {
                $scope.textColor = "{'color': 'red'}";
                change = 2;
            } 
            else {
                $scope.textColor = "{'color': 'black'}";
                change = 1;
            }
        };

        var colorFlash = function () {
            $interval(flash, 1000);
        };

        colorFlash();

    };

   app.controller("MainController", ["$scope", "$http", "$interval", MainController]);

}());

如果我将 $interval(flash, 1000); 更改为 $interval(flash(), 1000);，那么我可以将其更改为运行一次并将颜色从黑色更改为红色。但间隔不重复。我错过了什么？

Answer 1

这样做不是更容易吗？

在你的控制器中：

var i = 0;

$interval(function() {

  if (i % 2 === 0) {
    $scope.condition = true;
  }
  else {
    $scope.condition = false;
  }
}, 1000);

HTML:

<div ng-class="{'red-class': condition, 'black-class': !condition}"></div>

CSS:

.red-class {
  color: red;
}

.black-class {
  color: black;
}

Answer 2

您不需要 Angular 或 $interval 来显示闪烁的文本。你可以用 CSS.

@-webkit-keyframes flash {
  from {color: red;}
  to {color: black;}
}    
.flash{
   -webkit-animation-name: flash;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count:infinite;
   -webkit-animation-timing-function:ease-in-out;
   -webkit-animation-direction: alternate;
}

http://codepen.io/mchambaud/pen/VvvKrK

根据 CANIUSE.com 这应该适用于大多数浏览器。

http://caniuse.com/#feat=css-animation

更新：使用AngularJS $interval

HTML

<div class="jumbo" 
     ng-controller="MainController" 
     ng-mouseenter="backgroundColor = 'background-gold'" 
     ng-mouseleave="backgroundColor = ''">

     <h1 ng-class="backgroundColor">
        Sanjay Kumar Technology Services 
        <span ng-class="color">
            (NodeJS & AngularJS Demo)
        </span>
    </h1>
</div>

CSS

.red {
    color:red;
}
.black {
    color:black;
}
.background-gold {
    background-color:gold;
}

JAVASCRIPT

var app = angular.module("SanjayPage", []);

var MainController = function ($scope, $http, $interval) {
    $scope.backgroundColor = '';
    $scope.color = 'black';

    $interval(function (i) {
        $scope.color = i % 2 ? 'red' : 'black';
    }, 1000);
};

app.controller("MainController", ["$scope", "$http", "$interval", MainController]);

http://jsfiddle.net/mchambaud/570quw8u/14/

更新：Using ng-style

Answer 3

我希望您的时间间隔是运行，但它因错误而失败。当从间隔内调用 flash 函数时，变量可能不在范围内。您可以尝试将控制器代码简化为：

var MainController = function ($scope, $http, $interval) {

    $scope.textColor = "{'color': 'black'}";
    $scope.change = 1;

    $interval( function() {
        if (change === 1) {
            $scope.textColor = "{'color': 'red'}";
            $scope.change = 2;
        } 
        else {
            $scope.textColor = "{'color': 'black'}";
            $scope.change = 1;
        }
    }, 1000);
};

我还会将 change 变量附加到 $scope 以查看是否有所不同。

AngularJS 使用 $interval

AngularJS Using $interval

javascript

angularjs

angularjs-service