Angularjs ng-disabledは常に無効のままです。

Question

注：私はAngularJSについて知識がありません。

私はAngularJSを使用する非常に基本的なスクリプトを持っています。これは、私が動的にしたい簡単なログインフォームです。これは、私のセキュリティトークンサービス（IdentityPack3 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ときにのみdiabled持つことができます真と等しいか？

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