AngularJS Using $interval

Question

I am trying to use the $interval service in AngularJS to flash a text back and forth in color (red to black). The following code is not working and I don't know why.

This is the HTML (this question is for the span section).

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

This is the AngularJS in the .js file:

(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]);

}());

If I change $interval(flash, 1000); to $interval(flash(), 1000); then I can get it to run once and change the color black to red. But the interval does not repeat. What am I missing?

Answer 1

You do not need Angular or $interval to have flashing text. You could do it with 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

According to CANIUSE.com this should work in most browsers.

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

Update: Using 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/

UPDATE: Using ng-style

Answer 2

I expect that your interval is running but it's failing with a error. It could be that the variables aren't within scope when the flash function is called from within interval. You could try simplifying your controller code to:

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);
};

I'd also attache the change variable to $scope to see if that makes a difference.

Answer 3

Wouldn't it be easier to just do this?

In your controller:

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