javascript - AngularJS 函数被调用多次？

Question

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


      }

  });

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

在我的 html 中

• ng-app 在我的 html 标签中声明为 ng-app="Account"
• ng-controller 已在我的 <div class="container"> 中声明包装了 Angular 的 if
• 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>

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

Answer 1

正如 Orel 提到的，重复警报的原因很简单，就是在每个摘要周期调用您的 loginEnabled 函数。在不涉及太多细节的情况下，Angular 经常重新评估那些绑定(bind)到范围的函数和值，以确保您的 UI 准确地表示您的数据。

因此，最好将 loginEnabled 值分配给 bool 值并在范围内查询:

auth.loginEnabled = false;

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

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