AngularJS Function gets called many times?

Question

I have a very simple js file for my angular app.

angular.module('Account', ['firebase'])

  .value('fbURL', 'https://myURL.firebaseio.com/')

  .service('fbRef', function(fbURL) {
     return new Firebase(fbURL)
  })

  .controller('Authorization', function($scope, $firebase, $firebaseObject, fbRef){

      var auth = this;

      auth.loginEnabled = function() {

        alert('false');

        return false;
      } 

      auth.loginEmail = function() {


      }

  });

The auth.loginEnabled function gets called many times (the alert appears many times) when my html loads. Why is this?

In my html

• ng-app is declared in my html tag as ng-app="Account"
• ng-controller is delcared in my <div class="container"> that wraps an if for angular
• ng-if is declared twice, once for a true return and once for a false.

In short, here is my html code: (all your missing is the ng-app code described above)

<div class="container login-container" ng-controller="Authorization as auth">
            <div class="row">
                <div class="col-sm-12">
                    <form class="" action="" method="">
                        <div class="card-container manual-flip">
                            <div class="card">
                                <div class="front">
                                    <div class="cover">
                                        <img src="<?php echo $base; ?>assets/img/rotating_card_thumb2.png"/>
                                    </div>
                                    <div class="content" ng-if="auth.loginEnabled()">
                                        <div class="main">
                                            <h3 class="name">Login</h3>
                                            <p class="profession">My Account</p>
                                            <div class="form-group">
                                                <input type="email" ng-model="email" class="form-control" placeholder="E-mail Address">
                                            </div>
                                            <div class="form-group">
                                                <input type="password" ng-model="password" class="form-control" placeholder="Password">
                                            </div>
                                        </div>
                                        <div class="footer">
                                            <button type="submit" class="btn btn-block btn-primary">Login <i class="fa fa-arrow-right"></i></button>
                                        </div>
                                    </div>
                                    <div class="content" ng-if="!auth.loginEnabled()">
                                        <div class="main">
                                            <h3 class="name">Login</h3>
                                            <p class="profession">Temporarily Unavailable</p>
                                            <p class="text-center">We are currently updating our system for a better user experience! Please check back within a few hours.</p>
                                        </div>
                                        <div class="footer">
                                            <a href="<?php echo $base; ?>" class="btn btn-block btn-primary"><i class="fa fa-reply"></i> Return Home</a>
                                        </div>
                                    </div>
                                    <div class="back">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

I'm wanting to disable the login function all together at certain times, not see if the user is already logged in.

Answer 1

The reason is that your controller is called twice, may be because of this

ng-controller="Authorization as auth is mentioned in your view and also while configuring your route you might also include controller there too. like below

                 url: '/your url',
                 config: {
                     templateUrl: 'url',
                     controllerUrl: 'url',
                     controller:'Authorization'
                 }

If that is the case then, change your code to

                 url: '/your url',
                 config: {
                     templateUrl: 'url',
                     controllerUrl: 'url',
                 }

Answer 2

As Orel mentioned, the cause for the repeated alert is simply that your loginEnabled function is called upon every digest cycle. Without going into too much detail, Angular is frequently reevaluating those functions and values bound to the scope to ensure your UI is representing your data accurately.

Thus, it would be preferable to assign the loginEnabled value to a Boolean and query that within the scope:

auth.loginEnabled = false;

$rootScope.$on('myAuthenticationEvent', function () {
  auth.loginEnabled = true;
});

The usage of the $rootScope isn't necessary, but serves to demonstrate that some other function in your controller (perhaps a Firebase observer) could be responsible for updating your auth.loginEnabled value. Hope this helps!