javascript - AngularJS函数被调用多次？

我的角度应用程序有一个非常简单的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() {


      }

  });

当我的html加载时，auth.loginEnabled函数被调用多次（警报出现多次）。为什么是这样？

在我的HTML中


ng-app在我的html标签中声明为ng-app =“ Account”
ng-controller放在我的<div class="container">中，其中包裹了if for angular
ng-if声明两次，一次返回true，一次声明false。


简而言之，这是我的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>

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

最佳答案

正如Orel所提到的，重复发出警报的原因很简单，就是在每个摘要周期都调用loginEnabled函数。在不赘述的情况下，Angular经常重新评估绑定到范围的那些函数和值，以确保您的UI能够准确地表示数据。

因此，最好将loginEnabled值分配给布尔值并查询范围内的值：

auth.loginEnabled = false;

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

$ rootScope的使用不是必需的，但可以证明控制器中的某些其他功能（也许是Firebase观察器）可能负责更新您的auth.loginEnabled值。希望这可以帮助！