Question

我想根据范围变化禁用按钮。

这是我当前的指令代码：

function disabledButton(){
    return {
        restrict: 'EA',
        priority:1001,
        scope:{
            isLoading: '=loading'
        },
        link:(scope, element, attrs, isLoading)=>{
            scope.$watch('isLoading', () => {
                element.attr('disabled', true);
            });
       }
    }
}

我的HTML：

<button type="submit" class="pull-right" disabled-button>Update</button>

我的控制器很简单：

 $scope.loading = true;

但它没有用。该按钮未被禁用。

任何解决方案？

的jsfiddle https://jsfiddle.net/ssuhat/gp6tq0Lt/7/

Answer 1

link和compile无法协同工作。

在指令定义对象中，如果只定义链接，那就像使用空preLink函数的空编译函数和postLink函数中的代码一样简写。定义compile后，link会被angular忽略，因为compile应该返回链接函数。

如果您只从compile返回一个函数，那么它将在链接后执行。

＆＃13;

angular.module('app', [])
  .controller('myctrl', function($scope, $timeout) {
    $scope.loading = true;
    $scope.change = function() {
      $scope.loading = !$scope.loading;
    }
  })
  .directive('disabledButton', function() {
    return {
      restrict: 'AE',
      scope: {
        isLoading: '='
      },
      compile: function() {
        return function(scope, element, attrs) {
          console.log(element);
          var loading = scope.isLoading;
          scope.$watch('isLoading', function(a, b) {
            element.attr('disabled', a);
          });
        }
      }
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="myctrl">
    <button ng-click="change()">dsa</button>
    <div class="row">
      <button is-loading="loading" disabled-button>Update</button>
    </div>
  </div>
</div>

＆＃13;

Answer 2

尝试使用AngularJS提供的ngDisabled指令。

<button ng-model="button" ng-disabled="isLoading">Button</button>

Answer 3

使用element.prop('disabled', true);代替element.attr('disabled', true);

另外，请确保在$watch语句中添加else语句以重新启用该按钮。

Angular指令将范围设置为禁用按钮

3 个答案: