Question

注意：我对AngularJS一无所知。

我有一个使用AngularJS的非常基本的脚本。这是一个简单的登录表单，我想要动态。它是我复制粘贴的模板文件，以便在我的安全令牌服务（Identity Server 3 by leastprivilege）中实现登录页面。

所以，这就是它的样子：

<div class="page-header">
    <img class="img-responsive" src="../Content/Images/logo.png" alt="" />
</div>

<div class="row" ng-show="model.errorMessage">
    <div class="col-md-12 col-sm-12">
        <div ng-init="model.LoginButtonClicked = false" class="alert alert-danger">
            <strong>Error:</strong>
            {{model.errorMessage}}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12 col-sm-12" ng-show="model.loginUrl">
        <div class="panel panel-default">
            <div class="panel-body">
                <form name="form" method="post" action="{{model.loginUrl}}">
                    <anti-forgery-token token="model.antiForgery"></anti-forgery-token>

                    <fieldset>
                        <div class="form-group">
                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                            <input required name="username" id="username" type="text" class="form-control" ng-change="model.errorMessage = false; model.LoginButtonClicked = false" placeholder="Username" ng-model="model.username" maxlength="100">
                        </div>
                        <div class="form-group">
                            <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            <input required id="password" name="password" type="password" class="form-control" ng-change="model.errorMessage = false; model.LoginButtonClicked = false" placeholder="Password" ng-model="model.password" maxlength="100" autocomplete="off" focus-if="model.username">
                        </div>
                        <div class="form-group login-remember" ng-show="model.allowRememberMe">
                            <label for="rememberMe">
                                <input type="checkbox" id="rememberMe" name="rememberMe" ng-model="model.rememberMe" value="true">
                                <strong>Remember me</strong>
                            </label>
                        </div>
                        <div class="form-group">
                            <button ng-disabled="model.LoginButtonClicked" class="btn btn-login btn-primary" ng-init="model.LoginButtonClicked = false" ng-click="model.LoginButtonClicked = true">
                                <span ng-show="model.LoginButtonClicked && model.username && model.password" class="glyphicon glyphicon-refresh spinning"></span>
                                <span ng-show="!model.LoginButtonClicked || !model.username || !model.password">Login</span>    
                            </button>
                        </div>
                    </fieldset>
                </form>
            </div>
            <ul class="list-unstyled">
                <li ng-repeat="link in model.additionalLinks"><a ng-href="{{link.href}}">{{link.text}}</a></li>
            </ul>
        </div>
    </div>

    <!---<div class="col-md-6 col-sm-6 external-providers" ng-show="model.externalProviders.length">-->
    <div class="panel panel-default">
        <!--  <div class="panel-heading">
              <h3 class="panel-title">External Login</h3> -->
    </div>
    <div class="panel-body">
        <ul class="list-inline" style="text-align:center">
            <li ng-repeat="provider in model.externalProviders">
                <a class="btn btn-default" href="{{provider.href}}">{{provider.text}}</a>
            </li>
        </ul>
    </div>
    <!---- </div> -->
</div>

重要的是：

<div class="form-group">
    <button ng-disabled="model.LoginButtonClicked" class="btn btn-login btn-primary" ng-init="model.LoginButtonClicked = false" ng-click="model.LoginButtonClicked = true">
        <span ng-show="model.LoginButtonClicked && model.username && model.password" class="glyphicon glyphicon-refresh spinning"></span>
        <span ng-show="!model.LoginButtonClicked || !model.username || !model.password">Login</span>    
    </button>
</div>

在这里：

<div class="row" ng-show="model.errorMessage">
    <div class="col-md-12 col-sm-12">
        <div ng-init="model.LoginButtonClicked = false" class="alert alert-danger">
            <strong>Error:</strong>
            {{model.errorMessage}}
        </div>
    </div>
</div>

想法是在加载请求时有一个微调器，如果发生验证错误 - 删除微调器并返回初始状态。我通过属性 model.LoginButtonClicked 来操纵它。这就是为什么我试图在我的禁用功能中利用它（一旦微调器在那里我想禁用按钮 - 想要防止重复点击）。

出于某种原因，它始终作为按钮元素的附加属性保留，如下所示：禁用=“已禁用”

如果 model.LoginButtonClicked 等于true，我怎样才能实现我的目标并让它变得干净？

Answer 1

没有MCVE很难说，但如果你认为你的代码是正确的话，你可能只需要一个$scope.$apply ......

在这样的情况下你所要做的就是在单击按钮后将disabled变量设置为true，执行逻辑，然后在完成后将disabled变量设置为false。

HTML：

<button ng-disabled="loginButtonClicked" ng-click="buttonClicked()">click me</button>

JavaScript的：

  $scope.loginButtonClicked = false;

  $scope.buttonClicked = function() {
    //set the button clicked to true
    $scope.loginButtonClicked = true;

    //do whatever you need to do here ($http request, etc)

    //setTimeout is only to mock the time it would take to do the server call
    setTimeout(function() {
      $scope.$apply(function() {
        $scope.loginButtonClicked = false;
      });
    }, 2000);
  }

工作代码：Plunker

Angularjs ng-disabled始终处于停用状态

1 个答案: