-1

I am trying to cancel the $interval event in my directive while changing the route or state of the application. I found this code which could act in destroy event.

But this returns my element is not defined. Do I have to inject any service or directive in the controller. 

element.on('$destroy', function() {
          console.log("cancelling interval");
          $interval.cancel(promise);
        });

Error:

ReferenceError: element is not defined
    at new Controller (http://localhost:port/src/controller.js
    at invoke (http://localhost:port/bower_components/angular/angular.js:4182:17)
    at Object.instantiate (http://localhost:port/bower_components/angular/angular.js:4190:27)
    at http://localhost:port/bower_components/angular/angular.js:8453:28
    at $interpolate.compile (http://localhost:port/bower_components/angular-ui-router/release/angular-ui-router.js:3897:28)
    at invokeLinkFn (http://localhost:port/bower_components/angular/angular.js:8217:9)
    at nodeLinkFn (http://localhost:port/bower_components/angular/angular.js:7726:11)
    at compositeLinkFn (http://localhost:port/bower_components/angular/angular.js:7075:13)

Thanks in advance Code is pretty long, so posting the snipper where is called. Updated:

   (function ()
   { 
   'use strict'; 
   angular .module('app')
   .controller('Controller', Controller); 
   Controller.$inject = ['Service', '$modal', '$interval', '$scope']; 
   function Controller(Service, $modal, $interval, $scope)
   { 
     console.log("Beginning");
     var ctrl = this;
     $scope.headerName= "Header Name";
     ctrl.selected = {};
     setupData(); 
     var promise = $interval(setupData, 1000000);
     $scope.on('$destroy', function()
     { 
     $interval.cancel(promise); 
     });
Ashokprakash
  • 23
  • 1
  • 9
  • The code is inside a controller `function Controller($scope, $interval){ //element.on($destroy) }` Well I tried doing this `function($scope, $interval, element)`, but this is returns `on is not defined` – Ashokprakash Sep 30 '15 at 18:32
  • you need to use `$scope.on('$destroy', ..` – Betty St Sep 30 '15 at 18:33
  • Yeah I tried that too, its returned `$scope.on is not defined` – Ashokprakash Sep 30 '15 at 18:36
  • are you sure? which angular version do you use? – Betty St Sep 30 '15 at 18:37
  • I have installed bower components in my project. – Ashokprakash Sep 30 '15 at 18:39
  • If Some one is giving downvote, then you should post the answer for this. Then no mean downvoting the question. I am new to angualrJS – Ashokprakash Sep 30 '15 at 18:40
  • Issue has to do with where is this called. Show the full context of this code. If `element` is undefined there's something else wrong and not enough code is shown – charlietfl Sep 30 '15 at 18:40
  • Looking at `function($scope, $interval, element)` element isn't injectable in controller...need a lot more information as to what you think it is – charlietfl Sep 30 '15 at 18:43
  • `(function () { 'use strict'; angular .module('app') .controller('Controller', Controller); Controller.$inject = ['Service', '$modal', '$interval', '$scope']; function Controller(Service, $modal, $interval, $scope) { console.log("Beginning"); var ctrl = this; $scope.headerName= "Header Name"; ctrl.selected = {}; setupData(); var promise = $interval(setupData, 1000000); $scope.on('$destroy', function() { $interval.cancel(promise); });` – Ashokprakash Sep 30 '15 at 18:43
  • The code you found will only work in a directive. A controller knows nothing about elements – charlietfl Sep 30 '15 at 18:45

1 Answers1

0

Use $scope.$on('$destroy'..) and the interval timer will be removed when a new route is initialized:

$scope.$on('$destroy', function() {
      console.log("cancelling interval");
      $interval.cancel(promise);
});

WIthin the comments above the attempt at using $scope.on() was incorrect as all angular internal events methods use $ prefix

charlietfl
  • 170,828
  • 13
  • 121
  • 150