How to cancel $interval Method without ng-click?

Question

Actually I Need to Fire $http call to get the data for every 5 Seconds From One Controller.

I need to Cancel the Interval in the Other Controller .

Code Follows :-

Controller 1(Find all Events):-

function($interval,$timeout) {

        $rootScope.strtFinding=true;

         var FireItUpAndFindEvents=$interval(function(){
           console.log('$rootScope.strtFinding'+$rootScope.strtFinding);
         },5000);


        if($rootScope.strtFinding === false){ 
           console.log('$rootScope.strtFinding'+$rootScope.strtFinding);
            $scope.stop();
        };

        $scope.stop=function(){
            console.log('Called the Finding event');
            $interval.cancel(FireItUpAndFindOrders);
        };

Controller 2:-

 $rootscope.strtFinding=false;

Here I am Facing a challenge to Cancel the $interval from Other Controller By Updating $rootScope.

Please let me know Ideas .. Help would be greatly Appreciated.

Make a function in a service to set the timer and inject the service to both controllers.I think there is also a way to inject controllers to each other but I have never done that. In addition there is only a single character difference between `strtFinding` and `startFinding` yet one of them is significantly easier to read. Good luck — ODelibalta, Oct 09 '15 at 18:54

AWolf · Answer 1 · 2015-10-10T19:39:43.880

You could write a service for this as mentioned in the comments or use events $scope.$emit or $scope.$broadcast.

Difference between these two. Emitting goes from childs up to $rootScope and broadcasting goes down e.g. from $rootScope to all children.

At start button click I emit an event with the interval promise and the other controller can bind a method on $rootScope so it detects starting the interval.

Stopping can then be done with the promise passed with the event. But we need to $broadcast a stop event after stopping the interval so the StartController can clear the promise variable otherwise another start after stop wouldn't be possible.

Please have a look at the demo below or in this fiddle.

Update 10.10.2015

As you mentioned in the comments your use-case is different than what I coded and stopping an interval with changing to a different controller is easier than the event stuff.

Add your counter to ´$rootScope´ to have it displayed even after route change. I think otherwise the value would be destroyed with your controller.

Then pass your promise to your new state as stateParams so you can stop the interval. That should also work for ngRoute but then it should be done with $routeParams.

I'm hiding the stop button if the interval is not started to avoid the code to check if there is a promise.

You can find the demo with ui.router in this fiddle.

angular.module('demoApp', [])
 .controller('TimerController', TimerController)
 .controller('StopController', StopController);

function TimerController($scope, $interval) {
    var self = this,
        intPromise;
    
    $scope.$on('timerEvent:stopped', function() {
     intPromise = null; // timer stopped in other controller
    });
    
 this.start = function() {
        if (!intPromise) {
      intPromise = $interval(update, 1000);
         $scope.$emit('timerEvent:start', intPromise);
        }
    }
    
    function update() {
     self.value = Math.round(Math.random()*100, 0);
    }     
}

function StopController($rootScope, $interval) {
 var self = this;
    
    $rootScope.$on('timerEvent:start', function(evt, promise) {
        console.log(promise);
     self.timerPromise = promise;
    });
    
    this.stop = function() {
        console.log('stoppin', self.timerPromise);
        if ( self.timerPromise ) {
      $interval.cancel(self.timerPromise);
            $rootScope.$broadcast('timerEvent:stopped');
        }
    };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp">
    <div ng-controller="TimerController as timerCtrl">
        <button ng-click="timerCtrl.start()">start</button>
        {{timerCtrl.value}}
    </div>
    
    <div ng-controller="StopController as stopCtrl">
        <button ng-click="stopCtrl.stop()">stop</button>
    </div>

@ AWOLF I saw your Fiddle which is Good with ng-clicks. But the Challenging One I need is to Stop the Timer without Firing a ng-click . I need to Cancel the timer When i changed From ctrl 1 to Other controller SO Rootscope Plays the trick . Could You pls Modify Code Regarding that Scenario Plz. — Prasad, Oct 10 '15 at 15:14
Ah OK, that should be possible too. What router are you using? `ngRoute` or `ui.router`? Just to make the demo for your router. — AWolf, Oct 10 '15 at 19:04
That's possible. Please have a look at my updated answer. Is it like you need it? I had another idea: Adding the promise of the interval to `$rootScope` would probably work, too. But I think the way with `$stateParams` is cleaner. But creating a service for your `$interval` would be the best approach. Then you could call a stop method from your `stopController`. — AWolf, Oct 10 '15 at 19:48
Let me Give you A REAL Scenario . Users place orders frm Ordering Link . But when i go to another state lets say Store Stock then the background Music(Ajaxcall for every 5 Sec ) should Not happen .. Please Provide a fiddle or something with your idea. I Would take a look my post morning Time. You gave me more ideas Mr.Awolf . i can give you Good Rep frm my side my morning. Plz Provide Fiddle something if you can .. Nice Day !! Wolf — Prasad, Oct 10 '15 at 19:53
$rootScope.watch does the trick mate .. you can upvote if my post is informative Good Day !! — Prasad, Feb 27 '16 at 07:56

How to cancel $interval Method without ng-click?

1 Answers1