AngularJS指令入门开发实例

wjxbj

于 2013-08-14 12:11:36 发布

阅读量76

点赞数

分类专栏： AngularJS 文章标签： JavaScript AngularJS directive ViewUI

AngularJS 专栏收录该内容

85 篇文章 0 订阅

订阅专栏

功能说明：

根据某模型的值改变页面上所有input、select输入框是否disabled。

实例说明：

提供一个按钮，此按钮控制此模型的值，指令再根据此模型的值改变页面input、select输入框是否disabled。

效果展示：

首次打开页面，input、select输入框是disabled

点击"Change disabled status"按钮，input、select输入框变为非disabled，再点击，变回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) {
    	$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;
    		}
    	}
    });

如果指令关联两个模型，html可以data-ng-readonly-page="{flag1: 'viewLogic1.disabled', flag2: 'viewLogic2.disabled'}"关联，当然指令实现也要相应的改动，如下所示：

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="{flag1: 'viewLogic1.disabled', flag2: 'viewLogic2.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", ['$parse',function($parse){
        return {
            link: function(scope, element, attr) {
            	var modelName = scope.$eval(attr.ngReadonlyPage);

            	var fnCallback = function(){
            		var flag1 = $parse(modelName.flag1)(scope);
            		var flag2 = $parse(modelName.flag2)(scope);
            		if(flag1 == true && flag2 == true) {
            			element.find('select,input').attr('disabled', true);
            		}else {
            			element.find('select,input').removeAttr('disabled');
            		}
            	};
            	
            	scope.$watch(modelName.flag1, function () {
            		fnCallback();
            	});
            	scope.$watch(modelName.flag2, function () {
            		fnCallback();
            	});
            }
        }
    }]).controller("BJCtrl",function($scope) {
    	$scope.viewLogic1 = {
    		disabled: true
    	}
    	$scope.viewLogic2 = {
    		disabled: true
    	}
    	$scope.salutation = 'Hello';
    	$scope.name = 'World';
    	$scope.changeDisabledStatus = function() {
    		if($scope.viewLogic1.disabled && $scope.viewLogic2.disabled) {
    			$scope.viewLogic1.disabled = false;
    			$scope.viewLogic2.disabled = false;
    		}else {
    			$scope.viewLogic1.disabled = true;
    			$scope.viewLogic2.disabled = true;
    		}
    	}
    });

wjxbj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS指令入门开发实例

功能说明：根据某模型的值改变页面上所有input、select输入框是否disabled。实例说明：提供一个按钮，此按钮控制此模型的值，指令再根据此模型的值改变页面input、select输入框是否disabled。效果展示：首次打开页面，input、select输入框是disabled 点击"Change ...
复制链接

扫一扫