Angularjs ng-disabled reste toujours désactivé

Question

Note: J'ai de simples connaissances sur AngularJS.

J'ai un script très basique qui utilise AngularJS. C'est un simple formulaire de connexion que je veux rendre dynamique. C'est un fichier modèle que j'ai copié-collé afin d'implémenter la page de connexion dans mon service de jeton de sécurité (Identity Server 3 by leastprivilege).

Alors, voici comment il ressemble:

<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> 

choses importantes est ici:

<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> 

et ici:

<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> 

L'idée est d'avoir une fileuse lors du chargement de la requête et si des erreurs de validation surviennent - supprimez le compteur et retournez à l'état initial. Je manipule cela à travers la propriété model.LoginButtonClicked. C'est pourquoi j'essaie d'en profiter dans ma fonctionnalité de désactivation (une fois que le spinner est là, je veux désactiver le bouton - je veux éviter les clics répétitifs).

Pour une raison quelconque, il reste toujours comme attribut supplémentaire à l'élément de bouton comme ceci: désactivé = « désactivé »

Comment puis-je atteindre mon objectif et avoir diabled que lorsque model.LoginButtonClicked est égal à vrai?

Answer 1

Il est difficile de dire sans MCVE, mais vous pourriez juste besoin d'un $scope.$apply si vous pensez que votre code est correct ...

Tout ce que vous avez à faire dans une telle situation est définie la variable désactivée true Une fois le bouton cliqué, faites votre logique, puis redéfinissez la variable désactivée sur false une fois celle-ci terminée.

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); 
    } 

Code du travail: Plunker