title: Enable Button After Page Load in AngularJS Directive
body: <p>I am trying to enable a button after page load in an AngularJS directive. I applied <em>ng-disabled</em> for all my buttons <strong><em>DURING</em></strong> load and I would like to keep certain buttons disabled <strong><em>AFTER</em></strong> load.</p>
  
  <p>I need some direction/advice on:</p>
  
  <ul>
  <li>manipulating the DOM: from ng-disabled="!newAnimal.isDisabled" to ng-disabled="newAnimal.isDisabled" </li>
  </ul>
  
  <p>I appreciate the help. Thanks.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;a href="#/{{animal.id}}"&gt;
          &lt;button class="btn btn-success" ng-disabled="!newAnimal.isDisabled" id="add-animal" loading-animals&gt;
            Add Animal
          &lt;/button&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p><strong>FACTORY:</strong></p>
  
  <pre><code>    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
     });
  </code></pre>
  
  <p><strong>CONTROLLER (Modal):</strong></p>
  
  <pre><code>.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 &gt; 0;
              //when all objects are loaded, manipulate DOM 
              //make ng-disabled = "!isDisabled" to "isDisabled"
              element.attr("!newAnimal.isDisabled", "newAnimal.isDisabled);
      }
          loadingPage();
      }
  </code></pre>
  
  <p><strong>DIRECTIVE:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &gt; 0;
              };
  
              scope.$watch(scope.pageLoad(), function (value) {
                  if (value) {
                      element.attr("ng-disabled", "newAnimal.isDisabled");
                  } 
                  else {
                      element.removeAttr("ng-disabled");
                  }
              })
          }
      } 
  }]);</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I updated my directive and it works, not the best way of achieving the results but it's one way. </p>
  
  <p>(I would have preferred not to disable the button for 3 seconds but rather to listen to the $http request but since it's a workaround, I won't complain)</p>
  
  <p>Thanks for all the answers. I'll update in the future if I figure out a more efficient way.</p>
  
  <hr>
  
  <p><strong>DIRECTIVE:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> .directive('loadingAnimals', function() { 
         return { 
            restrict: 'A', 
            link: function (scope, element) {
            var disableLink = (function() {
                  element.removeClass('disabled'); 
              }); 
              setTimeout(disableLink, 3000);
            } 
           } 
          } 
        ]); </code></pre>
  </div>
  </div>
  </p>