AngularJS - event listener fired twice

Question

I searched a lot but I couldn't find a solution for my problem: I am new to AngularJS and I am using Ionic with Firebase to create an app. I want to block views from unauthenticated users. So when the user clicks on a view without authentication the Login modal should popup and redirect the view to home.

The code is like this:

myApp.controller('AppCtrl', ['$scope','$ionicModal', $state,...,
function($scope, $ionicModal, $state,...) {

// Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modalLogin = modal;
  });

// Open the login modal
  $scope.login = function() {
    if(!$scope.modalLogin.isShown()){
      $scope.modalLogin.show();
    }  
  };

/*** Verify Authentication - This is the problematic part... ***/
  $scope.$on("$stateChangeStart", 
     function(event, toState, toParams, fromState, fromParams){
        var auth = firebase.auth();

    if (toState.views.menuContent.authenticate && auth.currentUser === null){
      event.preventDefault();
      // User isn’t authenticated
      if(fromState.name != "app.home"){
        $state.go("app.home");
      }
      if(!$scope.modalLogin.isShown()){
        $scope.login();
      }      
    }
    else{
      return;
    }
  });


}]);

The thing is that no matter what I do the $scope.$on("$stateChangeStart",) callback function will fire twice. I checked for doubled controller declarations, I removed the $scope.login() function and even if the event listener is empty it is fired twice:

//Verify Authentication
      $scope.$on("$stateChangeStart", 
         function(event, toState, toParams, fromState, fromParams){
            console.log('This fires twice...');   
         }

Any thoughts? I new to angularJS so maybe it's very simple solution, but I couldn't find it.

Thanks in advance.

In your use case, where you want to block unauthenticated user, you are better off using AngularFire, the library has features relevant to your requirements, github.com/firebase/angularfire/blob/master/docs/guide/… — srijanshukla
– srijanshukla, Commented Sep 1, 2016 at 9:10
@srijanshukla Thanks for your comment. Actually, my first idea (and I think is the right way to do it) was doing exactly like this with a .run on app module using $rootScope. However, all my functions are related to $scope inside the controller(as you can see above) and I don't know how to use them from $rootScope. I am beginner in angularJS and it's all new to me. I followed a tutorial and it uses $scope inside the controller to call the authentication service, modal Login, logout etc... So when running with $rootScope I couldn't manage to trigger the modal when the user changes routes. — Jean Phelippe
– Jean Phelippe, Commented Sep 1, 2016 at 11:29

James Considine · Accepted Answer · 2016-09-01 08:19:25Z

1

This has happened to me in the past and the issue was because angular was being loaded twice. I had included the angular script, and ionic was including the angular script.

Removing our own angular script and letting ionic deal with it was the solution for me

answered Sep 1, 2016 at 8:19

James Considine

3232 silver badges13 bronze badges

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

1 Comment

Jean Phelippe Over a year ago

Thanks man! It worked like a charm. I spent a few hours on this. The problem was that I was using angular-bind-html-compile and probably it is calling angular twice. Before I had called angularJS twice but somehow I always got a warning in the console, so I didn't bother much about it. Thanks again!

Collectives™ on Stack Overflow

AngularJS - event listener fired twice

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related