在 AngularJS 指令中加载页面后启用按钮

Question

我试图在 AngularJS 指令中加载页面后启用按钮。我在 DURING 加载期间为我的所有按钮应用了 ng-disabled 并且我想禁用某些按钮加载后。

我需要一些 direction/advice：

操纵 DOM：从 ng-disabled="!newAnimal.isDisabled" 到 ng-disabled="newAnimal.isDisabled"

感谢您的帮助。谢谢。

HTML:

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

工厂：

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

控制器（模态）：

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

指令：

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

更新：

我更新了我的指令并且它有效，虽然不是实现结果的最佳方式，但它是一种方式。

（我宁愿不禁用按钮 3 秒，而是听 $http 请求，但由于这是一种解决方法，我不会抱怨）

谢谢大家的回答。以后有什么更有效的方法我会更新的

指令：

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

Answer 1

不确定我是否正确，但是要在页面完全加载后做一些事情，您可以使用 angular.element(document).ready()（正如您在 [=15 中看到的那样） =]).

所以你可以有一个 <button> 结构如下：

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

参见下面的示例：

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

希望对您有所帮助。

Answer 2

您也可以使用指令进行更改post页面加载

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

这就是指令的样子

.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

在 AngularJS 指令中加载页面后启用按钮

Enable Button After Page Load in AngularJS Directive

pageload

angularjs

angularjs-directive