使用AngularJS的$interval
我正在尝试使用$interval服务在AngularJS中来回刷新文本的颜色(从红色到黑色)。下面的代码不起作用，我不知道为什么。
这是HTML (这个问题是针对span部分的)。
<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>这是AngularJS文件中的.js：
(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);，那么我可以让它运行一次，并将黑色更改为红色。但间隔不会重复。我遗漏了什么？
回答 3
Stack Overflow用户
发布于 2015-09-10 13:50:57
您不需要角或$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/
更新：使用ng样式
Stack Overflow用户
发布于 2015-09-10 13:37:39
这么做不是更容易吗？
在您的控制器中：
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;
}Stack Overflow用户
发布于 2015-09-10 15:17:40
我希望您的间隔正在运行，但由于错误而失败了。当从间隔内调用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，以查看这是否有区别。
https://stackoverflow.com/questions/32503214
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号