日期:2014-05-16  浏览次数:20263 次

AngularJS指令入门开发实例

功能说明:

??????? 根据某模型的值改变页面上所有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