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