Question

我试图在AngularJS指令中加载页面后启用一个按钮。我为所有按钮 DURING 加载了 ng-disabled ，我希望禁用某些按钮 AFTER 加载。

我需要一些指导/建议：

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

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

CONTROLLER（模态）：

.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()（正如您在answer中看到的那样）

所以你可以拥有<button>这样的结构：

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

请参阅以下示例：

＆＃13;

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

＆＃13;

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

＆＃13;

我希望它有所帮助。

Answer 2

您还可以使用指令在页面加载后进行更改

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

2 个答案: