AngularJS函数被多次调用？

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

我的角度应用程序有一个非常简单的js文件。

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?

当我的html加载时,auth.loginEnabled函数被多次调用(警报出现多次)。为什么是这样?

In my html

在我的HTML中

ng-app is declared in my html tag as ng-app="Account"

ng-app在我的html标签中声明为ng-app =“Account”

ng-controller is delcared in my <div class="container"> that wraps an if for angular

ng-controller在我的

中包含,它包含一个if for angular

ng-if is declared twice, once for a true return and once for a false.

ng-if被声明两次,一次用于真正的返回,一次用于虚假。

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

简而言之,这是我的HTML代码:(所有缺少的是上面描述的ng-app代码)

<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.

我想在某些时候一起禁用登录功能,而不是看用户是否已经登录。

2 个解决方案

#1

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.

正如Orel所提到的,重复警报的原因很简单,就是每个摘要周期都会调用loginEnabled函数。在没有详细介绍的情况下,Angular经常重新评估绑定到范围的那些函数和值,以确保您的UI准确地表示您的数据。

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

因此,最好将loginEnabled值分配给范围内的布尔和查询:

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!

$ rootScope的使用不是必需的,但用于证明控制器中的某些其他功能(可能是Firebase观察者)可能负责更新auth.loginEnabled值。希望这可以帮助!

#2

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

ng-controller =“在您的视图中提到授权为auth,在配置路线时,您也可能在那里包含控制器。如下所示

                 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',
                 }

#1