(function() {
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.disabled = false;
});
app.directive('ngDisabled', function() {
return {
controller: function($scope, $attrs) {
var self = this;
$scope.$watch($attrs.ngDisabled, function(isDisabled) {
self.isDisabled = isDisabled;
});
}
};
});
function reactToParentNgDisabled(tagName) {
app.directive(tagName, function() {
return {
restrict: 'E',
require: '?^ngDisabled',
link: function(scope, element, attrs, ngDisabledController) {
if (!ngDisabledController) return;
scope.$watch(function() {
return ngDisabledController.isDisabled;
}, function(isDisabled) {
element.prop('disabled', isDisabled);
});
}
};
});
}
['input', 'select', 'button', 'textarea'].forEach(reactToParentNgDisabled);
})();
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>
<button ng-click="disabled = !disabled">Toggle</button>
</p>
<form>
<table ng-disabled="disabled">
<tbody>
<tr>
<td>
<input type="text">
</td>
<td>
<button>A button</button>
</td>
<td>
<select>
<option>An option</option>
<option>Another option</option>
</select>
</td>
<td>
<textarea>Textarea</textarea>
</td>
<td>
<input type="radio">
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
/* Put your css in here */