Schaltfläche aktivieren nach dem Laden der Seite in AngularJS Direktive

Question

Ich versuche, eine Schaltfläche nach dem Laden der Seite in einer AngularJS-Direktive zu aktivieren. Ich bewarb mich ng-disabled für alle meine Tasten WÄHREND Last, und ich möchte bestimmte NACH Last deaktiviert Tasten halten.

Ich brauche Richtung/Beratung:

• die DOM-Manipulation: von ng-disabled = bis ng-disabled = "newAnimal.isDisabled"

I "newAnimal.isDisabled!" schätze die Hilfe. Vielen Dank.

HTML:

<a href="#/{{animal.id}}"> 
     <button class="btn btn-success" ng-disabled="!newAnimal.isDisabled" id="add-animal" loading-animals> 
      Add Animal 
     </button> 
    </a> 

FACTORY:

var animalFactory = angular.module('app.myFactory',[]) 

    animalFactory.factory('newAnimal',function(){ 
     var newAnimal = function(){ 
       this.animal = ""; 
       this.totalAnimals = 0; 
       this.totalAdopted = 0; 
       this.isDisabled = false; 
     }; 
     return newAnimal 
    }); 

REGLER (Modal):

.controller('InformationCtrl', function($scope, $modalInstance, $http) { 
    $scope.ok = function(){ 
     //check if button successfully clicked 
     $modalInstance.dismiss('success'); 

     //the code below was from a directive ('LoadingAnimals') that I was working on 

     //check if all data has been loaded from backend 
     var loadingPage = function(){ 
      return $http.pendingRequests.length > 0; 
      //when all objects are loaded, manipulate DOM 
      //make ng-disabled = "!isDisabled" to "isDisabled" 
      element.attr("!newAnimal.isDisabled", "newAnimal.isDisabled); 
    } 
     loadingPage(); 
    } 

RICHTLINIE:

app.directive('loadingAnimals', ['$http', function($http) {
   
 
return {
 
 
     restrict: 'A',
 
 
     link: function (scope, element, attrs) {

 
 
      var addButton = attrs.ngDisabled; 
 
      //console.log(element.attr('ng-disabled')); 
 
      scope.pageLoad = function() { 
 
       return $http.pendingRequests.length > 0; 
 
      }; 
 

 
      scope.$watch(scope.pageLoad(), function (value) { 
 
       if (value) { 
 
        element.attr("ng-disabled", "newAnimal.isDisabled"); 
 
       } 
 
       else { 
 
        element.removeAttr("ng-disabled"); 
 
       } 
 
      }) 
 
     } 
 
    }
 
 
}]);

---

UPDATE:

ich meine Richtlinie aktualisiert und es funktioniert, nicht der beste Weg, um die Ergebnisse zu erreichen, aber es ist eine Möglichkeit.

(Ich hätte nicht die Taste 3 Sekunden lang zu deaktivieren, sondern auf die $ HTTP-Anfrage zu hören, aber da es eine Abhilfe ist, werde ich nicht beschweren)

Danke für alle Antworten. Ich werde in Zukunft aktualisieren, wenn ich einen effizienteren Weg finde.

---

RICHTLINIE:

.directive('loadingAnimals', function() {
 
 
     return {
 
 
      restrict: 'A',
 
 
      link: function (scope, element) { 
 
      var disableLink = (function() { 
 
       element.removeClass('disabled');
 
 
      });
 
 
      setTimeout(disableLink, 3000); 
 
      }
 
 
     }
 
 
     }
 
 
     ]);


Answer 1

nicht sicher, ob ich richtig bin, aber etwas zu tun, nachdem Seite vollständig Last ist, können Sie angular.element(document).ready() verwenden (wie Sie kann in diesem answer sehen).

So können Sie eine <button> wie folgt aufgebaut haben:

<button type="button" class="btn btn-primary" ng-disabled="!isDisabled || !animal.totalAnimals">Add animal</button> 

das Beispiel Siehe unten:

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('app', []) 
 
    .controller('MainCtrl', MainCtrl); 
 

 
    function MainCtrl($scope) { 
 
    var vm = this; 
 
    vm.animals = [ 
 
     { 
 
     "name":"hamster", 
 
     "totalAnimals": 20, 
 
     "totalAdopted": 5, 
 
     }, 
 
     { 
 
     "name":"turtle", 
 
     "totalAnimals": 0, 
 
     "totalAdopted": 0, 
 
     }, 
 
     { 
 
     "name":"cat", 
 
     "totalAnimals": 9, 
 
     "totalAdopted": 6, 
 
     }, 
 
     { 
 
     "name":"dog", 
 
     "totalAnimals": 7, 
 
     "totalAdopted": 2, 
 
     }, 
 
     { 
 
     "name":"tiger", 
 
     "totalAnimals": 0, 
 
     "totalAdopted": 0, 
 
     } 
 
    ]; 
 
    
 
    vm.isDisabled = true; 
 
    
 
    angular.element(document).ready(function() { 
 
     console.log('completely load!'); 
 
     vm.isDisabled = false; 
 
    }); 
 
    } 
 
})();

<!DOCTYPE HTML> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 

 
<body ng-controller="MainCtrl as main"> 
 
    <table class="table table-hover"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>#of Animals Added</th> 
 
     <th>#of Animals Adopted</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="animal in main.animals track by $index"> 
 
     <td ng-bind="animal.name"></td> 
 
     <td ng-bind="animal.totalAnimals"></td> 
 
     <td ng-bind="animal.totalAdopted"></td> 
 
     <td> 
 
      <button type="button" class="btn btn-primary" ng-disabled="!main.isDisabled || !animal.totalAnimals">Add animal</button> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

Ich hoffe, es hilft.

Answer 2

Sie können auch eine Richtlinie verwenden, um Änderungen Last

<button id="submit" ng-click="test()">Submit</button> 
<disable-button></disable-button> 

wie Dies ist, wie die Richtlinie

.directive('disableButton', function() { 
      return { 
       restrict: 'E', 
       compile: function (el, attr) { 
        return { 
         pre: function (scope, el, attr) { 

         }, 
         post: function (scope, el, attr) { 
          $('#submit').attr("disabled", true); 
          //add your logic here 
         } 
        } 
       } 
      } 
     }) 

Refer the demo