fragilewindows fragilewindows - 1 year ago 143
AngularJS Question

Enable Button After Page Load in AngularJS Directive

I am trying to enable a button after page load. I applied ng-disabled for all my buttons DURING load and I would like to keep certain buttons disabled AFTER load. The issue is that I have a modal that is preventing me from effectively using:

window.onload = function () { console.log("page loaded.") }

I attempted to do this in a directive, but because of the modal I'm not sure what I should do (I just ended up moving everything from my directive into my modal controller).


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


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

var newAnimal = function(){
this.animal = "";
this.totalAnimals = 0;
this.totalAdopted = 0;
this.isDisabled = false;
return newAnimal


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

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

I need some direction/advice on:

  • function 1: listen for modal submit event (and bind that event to function 2)

  • function 2: check to see if all data has been loaded

  • manipulating the DOM: from ng-disabled="!newAnimal.isDisabled" to ng-disabled="newAnimal.isDisabled"

I appreciate the help. Thanks.

Answer Source

Not sure if I'm correct but to do something after page is completely load, you can use angular.element(document).ready() (as you can see in this answer).

So you can have a <button> structured like this:

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

See the example below:

(function() {
  'use strict';

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

  function MainCtrl($scope) {
    var vm = this;
    vm.animals = [
        "totalAnimals": 20,
        "totalAdopted": 5,
        "totalAnimals": 0,
        "totalAdopted": 0,
        "totalAnimals": 9,
        "totalAdopted": 6,
        "totalAnimals": 7,
        "totalAdopted": 2,
        "totalAnimals": 0,
        "totalAdopted": 0,
    vm.isDisabled = true;
    angular.element(document).ready(function () {
      console.log('completely load!');
      vm.isDisabled = false;
<html ng-app="app">

  <script src=""></script>
  <link rel="stylesheet" href="">

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


I hope it helps.