Angularjs ng禁用始终保持禁用

Question

注意：我对AngularJS知之甚少。

我有一个非常基本的脚本，它使用AngularJS。这是一个简单的登录表单，我想使其成为dynamic.It是一个模板文件，我为了在我的安全令牌服务（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操纵。这就是为什么我试图利用它在我的禁用功能（一旦微调在那里，我想让按钮被禁用 - 要防止重复点击）。

出于某种原因，它始终作为附加属性保持像这样的按钮元素：禁用=“禁用”

我如何能实现我的目标，并把它只有diabled当model.LoginButtonClicked是等于真？

Answer 1

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

所有你必须这样设置残疾人变量设置为true的情况下做一旦按钮被点击，执行你的逻辑，然后在完成后将禁用变量设置为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