功能说明：
??????? 根据某模型的值改变页面上所有input、select输入框是否disabled。
实例说明：
??????? 提供一个按钮，此按钮控制此模型的值，指令再根据此模型的值改变页面input、select输入框是否disabled。
效果展示：
???????? 首次打开页面，input、select输入框是disabled
??????? 具体实现：
??????? BJDirective.html（注意，这里必须将jquery放在angular前面，因为jquery放在angular后面，angular会用自己的JQLite，而不用JQuery，这样的结果是如下指令中的element.find('input,select')结果为空数组，达不到效果）：
<!doctype html>
<html data-ng-app="BJDirective">
<head>
<script src="lib/jquery-1.9.1.js"></script>
<script src="lib/angular.js"></script>
<script src="js/scriptBJDirective.js"></script>
</head>
<body>
<div data-ng-controller="BJCtrl" data-ng-readonly-page="viewLogic.disabled">
Salutation: <input type="text" data-ng-model="salutation"><br>
Name: <input type="text" data-ng-model="name"><br>
<pre data-ng-bind-template="{{salutation}} {{name}}!"></pre>
<button data-ng-click="changeDisabledStatus();">Change disabled status</button>
</div>
</body>
</html>
???????? scriptBJDirective.js：
angular.module("BJDirective", [])
.directive("ngReadonlyPage", function(){
return {
link: function(scope, element, attr) {
var modelName = attr.ngReadonlyPage;
if(!modelName)
return;
scope.$watch(modelName, function (val) {
if(val == true) {
element.find('select,input').attr('disabled', true);
}else if(val == false) {
element.find('select,input').removeAttr('disabled');
}
}, true);
}
}
}).controller("BJCtrl",function($scope) {
$scope.viewLogic = {
disabled: true
}
$scope.salutation = 'Hello';
$scope.name = 'World';
$scope.changeDisabledStatus = function() {
if($scope.viewLogic.disabled) {
$scope.viewLogic.disabled = false;
}else {
$scope.viewLogic.disabled = true;
}
}
});
???????? 对于指令依赖的关联模型，也可data-ng-readonly-page="‘viewLogic.disabled’"，此时，指令内部需用$eval解析。如下所示：
???????? BJDirective.html：
<!doctype html>
<html data-ng-app="BJDirective">
<head>
<script src="lib/jquery-1.9.1.js"></script>
<script src="lib/angular.js"></script>
<script src="js/scriptBJDirective.js"></script>
</head>
<body>
<div data-ng-controller="BJCtrl" data-ng-readonly-page="'viewLogic.disabled'">
Salutation: <input type="text" data-ng-model="salutation"><br>
Name: <input type="text" data-ng-model="name"><br>
<pre data-ng-bind-template="{{salutation}} {{name}}!"></pre>
<button data-ng-click="changeDisabledStatus();">Change disabled status</button>
</div>
</body>
</html>
??????? scriptBJDirective.js：
angular.module("BJDirective", [])
.directive("ngReadonlyPage", function(){
return {
link: function(scope, element, attr) {
var modelName = scope.$eval(attr.ngReadonlyPage);
scope.$watch(modelName, function (val) {
if(val == true) {
element.find('select,input').attr('disabled', true);
}else if(val == false) {
element.find('select,input').removeAttr('disabled');
}
});
}
}
}).controller("BJCtrl",function($scope) {
$sco