禁用提交按鈕的指令

Question

我只是想添加類disable當form.$valid是false。第一個提交按鈕（不是指令）obiouvsly的作品，但我不知道如何使指令內的形式狀態可見。我不能在指令硬編碼形式的名稱，它應該是幾種形式可重複使用..

<form id="tA" name="form" ng-controller="ctrl" ng-submit="form.$valid && save()" novalidate> 

    <input type="text" class="form-control" placeholder="title" name="name" ng-model="model.name" required ng-required="true"> 

    <button class="btn btn-default" ng-class="{'disabled' : !form.$valid}" class="btn btn-default">Submit</button> 

<button-raised disabled="!form.$valid">directive Submit</button-raised> 

做到這一點

---

app.directive('buttonRaised', function() { 
return { 
    restrict: 'E', 
    template: '<button class="mdl-button" ng-class="ngClass" ng-transclude></button>', 
    scope: { 
     ngModel: '=' 
    }, 
    transclude: true, 
    link: function($scope, el, $attrs,formCtrl) { 
     console.log(formCtrl) 
     $scope.ngClass = { 
      // 'disabled': $scope.$parent.formCtrl.$valid, 
     }; 
    } 
}; 
}); 

Answer 1

一種方式是通過你的布爾作爲指令的參數：

app.directive('buttonRaised', function() { 
return { 
    restrict: 'E', 
    template: '<button class="mdl-button" ng-disabled="disabled" ng-class="ngClass" ng-transclude></button>', 
    scope: { 
     ngModel: '=', 
     disabled: '=' 
    }, 
    transclude: true, 
    link: function($scope, el, $attrs,formCtrl) { 
     console.log(formCtrl) 
     $scope.ngClass = { 
      // 'disabled': $scope.$parent.formCtrl.$valid, 
     }; 
    } 
}; 

}）;

Answer 2

可以更改指令和HTML按照該工作this

該指令

app.directive('buttonRaised', function() { 
    return { 
     restrict: 'E', 
     template: '<button class="mdl-button" ng-class="{\'disabled\': disableButton}" ng-transclude></button>', 
     scope: { 
      disableButton: '=' 
      }, 
      transclude: true, 
      link: function($scope, el, $attrs,formCtrl) { 
       console.log(formCtrl) 

      } 
     }; 
     }); 

的HTML

<form id="tA" name="form" ng-controller="ctrl" ng-submit="form.$valid && save()" novalidate> 

    <input type="text" class="form-control" placeholder="title" name="name" ng-model="model.name" required ng-required="true"> 

    <button class="btn btn-default" ng-class="{'disabled' : !form.$valid}" class="btn btn-default">Submit</button> 


    // directive taking parameter disable-button 
    <button-raised disable-button="!form.$valid">directive Submit</button-raised>