Question

我想使用ng-disabled禁用div部分，但是它有效。我也尝试使用fieldset代替div。 ng-disabled似乎不起作用。

以下是视图部分：

compile 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

这是控制器部分：

<div ng-disabled="model.disableDate">
    <div>Date</div>
    <div ion-datetime-picker ng-model="model.timeEntryDate" ng-change="onTimeEntryDateChange()" date="true" time="false" monday-first="true" am-pm="true">{{model.timeEntryDate|| "Select" | date: "dd/MM/yyyy"}} <i class="icon ion-ios-calendar-outline"></i> </div>
</div>

即使在禁用条件下，此日历也会弹出。

Answer 1

您无法停用DIV。仅禁用按钮和输入类型。你可以尝试使用CSS。使用ng-class。

<div ng-class="{ 'div-disabled': model.disableDate}"> // give condition here as per your scenario

.div-disabled
{
  pointer-events: none;
  opacity: 0.5;
  background: #CCC;
}

Answer 2

您可以创建一个属性指令来禁用任何div。见下文：

  var app = angular.module("myApp", []);
        app.directive("disableSection", function() {
            return {
                restrict : "A",
                 link:function(scope,element,attr,ctrl){                   
                        element.css({
                          cursor :"not-allowed",
                          opacity: "0.5",
                          background: "#CCC"
                        });
                    }
            };
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div disable-section>This is disabled div</div>
</body>

Answer 3

您可以使用指针事件：无来禁用div： -

＆＃13;

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.obj = {};
  $scope.obj.disabled = false;
  
  $scope.clickMe = function(){
  alert('div is enabled');
  }
  
});

＆＃13;

.disabled {
    pointer-events: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  
  <div ng-class="(obj.disabled)?'disabled':''" style="width:100px;height:100px;border:1px solid black">
  <a style="cursor:pointer" ng-click="clickMe()">Click Me</a>
  </div>
  <button ng-click="obj.disabled = !obj.disabled">{{(obj.disabled)?'Enable':'Disable'}}</button>
</div>

＆＃13;

使用ng-disabled禁用angularjs中的div

3 个答案: