AngularJS函数被多次调用

AngularJS Function gets called many times?

本文关键字：调用 函数 AngularJS      更新时间：2023-09-26

我有一个非常简单的js文件为我的angular应用。

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
  • 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值。希望这对你有帮助!

原因是你的控制器被调用了两次，可能是因为这个

ng-controller="Authorization as auth在你的视图中被提到，同时在配置你的路由时，你也可以在那里包括控制器。像下面的

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

如果是这种情况，那么将代码更改为

                 url: '/your url',
                 config: {
                     templateUrl: 'url',
                     controllerUrl: 'url',
                 }
相关文章：