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?

Michael · Accepted Answer · 2015-09-10 18:31:04Z

2

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

edited Sep 10, 2015 at 18:31

answered Sep 10, 2015 at 13:50

Michael

3,4261 gold badge22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jaykum Over a year ago

Yes, I was actually doing it fine with setInterval and using the iflash class on the span, but I am trying to learn AngularJS and want to understand why my code is not working using AngularJS.

Michael Over a year ago

I understand. I will have a look at your code and post a fiddler of it.

jaykum Over a year ago

Michael, this does work. For some reason it won't in plunkr but does in jsfiddle and in my web browser, etc. So for some reason ng-class can change the text color back and forth but not ng-style??? I am using ng-style successfully on the ng=mouseenter and ng-mouseleave events with angular, so why can't $interval work for ng-style? Any ideas?

jaykum Over a year ago

Michael, thank you very much. Yes it does work with both as it should. My error was in the syntax. $scope.textColor = "{'color': 'red'}"; should really be without quotes $scope.textColor = {'color': 'red'}; and in the HTML, I should use ng-style ="textColor" not ng-style ="{{textColor}}".

Michael Over a year ago

Yup. This is called Interpolation. Here's more information about Expressions in Angular. BTW, NG-BOOK is a great resource, so is egghead.io ng-book.com/p/Expressions

Chrillewoodz · Accepted Answer · 2015-09-10 13:37:39Z

0

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

answered Sep 10, 2015 at 13:37

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

2 Comments

jaykum Over a year ago

I tried your code but same result. I am learning AngularJS and am trying to understand why my $interval service is not working. I am using the latest framework reference <script src="code.angularjs.org/1.4.3/angular.js" data-require="[email protected]" data-semver="1.4.3"></script> I want to understand if there is something fundamentally that I am missing that makes my code not work.

Chrillewoodz Over a year ago

@JayKum Can you make a plunkr?

Matt Ball · Accepted Answer · 2015-09-10 15:17:40Z

0

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.

answered Sep 10, 2015 at 15:17

Matt Ball

4324 silver badges9 bronze badges

3 Comments

jaykum Over a year ago

I have tried to simplify as you suggest, the only think I had not tried was attaching change to scope which I think is a very good way to go. However, your code is still not making it work. Is there a way to check if $interval is failing with an error? By the way I corrected to if($scope.change === 1). I have a feeling it is something simple I just am not seeing because this should work.

Matt Ball Over a year ago

You could add some console.log messages in the $interval function to track how far it's getting though. If one doesn't get printed it's failing before that.

jaykum Over a year ago

Thanks Matt. See my response to Michael above. I appreciate your help and suggestions. It looks like my error was of syntax. I could not find any reference to the correct syntax for what I was doing (trying to use Angular to set CSS attribute directly). I suppose I should invest in a reference book.

Collectives™ on Stack Overflow

AngularJS Using $interval

3 Answers 3

5 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related