在angularjs中禁用整个div

Question

有没有办法在angularjs中禁用整个div标签.我有一个div标签,里面包含几个表单字段,我只想用一个条件禁用它们.这可能吗？下面是我的代码.我尝试使用但它没有用.任何的意见都将会有帮助.谢谢,请看下面的代码.我有包含表单的主div标签.我想根据条件禁用表单,因此用户无法输入id和name文本字段.

<div>
<form name="form" role="form" novalidate
class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength"
ng-submit="createStudy()">



<div class="form-group">
    <label>ID</label> <input type="text" class="form-control"
        name="id" ng-model="study.id">
</div>

<div class="form-group">
    <label>Name</label> <input type="text" class="form-control"
        name="name" ng-model="study.name" ng-minlength=1
        ng-maxlength=50 ng-required="true">
</div>



<div class="modal-footer">
   <a href="#/studies"><button type="button" class="btn btn-default"
        data-dismiss="modal" ng-click="clear()">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
    </button></a>
    <button type="submit" ng-disabled="form.$invalid"
        class="btn btn-primary">
        <span class="glyphicon glyphicon-save"></span> Save
    </button>
</div>

</form>
</div>

Answer 1

您可以使用'fieldset'而不是'div',如果向其中添加ng-disabled,它将禁用其中的所有表单元素.如下请见 :

<fieldset ng-disabled="true"> 
<label>ID</label> <input type="text" class="form-control"
        name="id" ng-model="study.id">
<label>Name</label> <input type="text" class="form-control"
        name="name" ng-model="study.name" ng-minlength=1
        ng-maxlength=50 ng-required="true">
</fieldset>

Answer 2

您可以编辑css/less来禁用禁用div中的所有元素.

例如:

在html中设置.disabled-class:

<div ng-disabled="disableExpression" 
     ng-class="{'disabled': disableExpression}"
>
  <!-- content -->
</div>

设置你的残疾人div:

.disabled{
  opacity: 0.5;
  pointer-events: none;

  > * {
    opacity: 0.5;
    pointer-events: none;
  }
}

Answer 3

您可以轻松地为此创建自己的指令,这将禁用元素内的所有输入(在您的情况下为表单);

yourModule.directive('disableForm',function(){

    return{
       scope:{
         disableForm:'=' 
       }
       link:function(scope, element ){
         if(scope.disableForm){
          angular.element('input',element).attr('disabled','disabled') ;
         }
       }
     }
    });

在HTML中,

<form name="form" role="form" novalidate disable-form="condition" ...

Answer 4

在主要<div>你写:

<div ng-class="{'my-disable':condition}">

在css文件中:

.my-disable{
    pointer-events:none;
}