`

AngularJS指令入门开发实例

JavaScriptAngularJSdirective 
阅读更多

功能说明：

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

 

  • 大小: 20.2 KB
  • 大小: 19.2 KB
分享到：
| java override overwrite与overload
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics