Угловая директива set scope watch to disabled button

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> 

My Controller только простой:

Но это не работает. Кнопка не отключена.

Любое решение?

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

Answer 1

link и compile не работают вместе.

В объекте определения директивы, если вы определяете только ссылку, это означает сокращение от пустой функции компиляции с пустой функцией preLink с кодом в функции postLink. Как только вы определяете compile, link игнорируется угловым, потому что compile должен возвращать функции связывания.

Если вы возвращаете только одну функцию из compile, она будет выполнена после связи.

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

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

Answer 2

Попробуйте использовать ngDisabled директиву, представленную AngularJS.

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

Answer 3

Использование element.prop('disabled', true); вместо element.attr('disabled', true);

Также убедитесь, что добавить еще заявление в $watch заявлении включить кнопку повторно.