`

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
评论
发表评论

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

相关推荐

    AngularJs入门学习实例

    **AngularJS 入门学习实例** AngularJS 是一个强大的前端JavaScript框架，由Google维护，用于构建动态Web应用。它通过MVC（Model-View-Controller）架构模式简化了开发过程，提供数据绑定、依赖注入、模块化等功能...

    AngularJS入门教程中SQL实例详解

    总的来说，AngularJS与SQL的结合使得前端开发人员能够轻松地从数据库获取数据并在用户界面上展示。通过$http服务，可以实现前后端的通信，构建动态、实时的应用程序。了解如何正确地集成和使用这些工具对于任何...

    AngularJS 中文版 入门 基础 教程

    通过这个中文版的入门基础教程，初学者将能全面了解AngularJS的基本结构和核心功能，并能够着手开发自己的AngularJS应用。学习过程中，结合实际的代码例子和实例练习，将有助于更好地理解和掌握这些知识点。

    AngularJS实例入门

    3. **HTML模板**：在HTML文件中，使用AngularJS指令与控制器交互。比如： ```html &lt;!DOCTYPE html&gt; &lt;h1&gt;{{message}} ``` `ng-app`指令启动AngularJS应用，`ng-controller`指定当前作用域的控制器。`{{...

    AngularJS入门小Demo

    你只需在需要的地方声明依赖，AngularJS 会自动提供实例。 9. **表达式**：AngularJS 表达式允许在 HTML 中直接嵌入 JavaScript 代码，以计算值或执行操作。比如 `{{ variable }}` 用于显示变量的值。 10. **模板*...

    AngularJS入门教程之表格实例详解

    首先，让我们来看一个基础的AngularJS表格实例。在以下代码中，`ng-repeat`指令用于遍历`names`数组，并将每个对象的`Name`和`Country`属性分别显示在表格的单元格中： ```html &lt;td&gt;{{ x.Name }} &lt;td&gt;{{ x....

    AngularJs 60分钟入门基础教程

    AngularJs是一个用于开发单页Web应用（Single Page Web Application，简称SPA）的开源JavaScript框架。单页应用指的是加载一次资源后，所有的交互都发生在一个页面上，利用JavaScript动态地更新页面内容，而不是传统...

    AngularJS指令与控制器之间的交互功能示例

    ###AngularJS指令与控制器交互的基本概念 #### 1. 指令的定义和作用 指令通过定义新的HTML元素或属性来扩展HTML的功能。定义指令时，可以通过restrict属性指定指令适用的范围，比如'E'表示元素，'A'表示属性。指令...

    angularjs入门已经常用的小插件

    **AngularJS 入门与常用小插件详解** AngularJS，作为一款强大的前端JavaScript框架，由Google维护，广泛应用于构建动态Web应用。它通过MVC（Model-View-Controller）架构模式，使得开发者能够更有效地组织和管理...

    angularjs开发文档

    在提供的压缩包文件中，包含了多份AngularJS的学习资料，如"AngularJS学习笔记 - 进出自由,我的分享.mht"、"AngularJS开发指南"、"AngularJs学习笔记"和"AngularJS入门教程"。这些资源将帮助你深入理解AngularJS的...

    AngularJS入门教程之服务(Service)

    AngularJS是Google开发的一款开源前端框架，用于构建动态的Web应用程序。AngularJS中Service（服务）的概念是框架中极为重要的组成部分。服务在AngularJS应用中扮演着多种角色，它负责维护和管理应用的状态，提供...

    AngularJS入门教程之数据绑定原理详解

    AngularJS是一个流行的前端JavaScript框架，它通过数据绑定机制简化了Web开发。数据绑定是AngularJS的核心特性之一，能够实现模型和视图之间的同步更新。在AngularJS中，数据绑定主要分为两大类：双向数据绑定和单向...

    AngularJS1.X快速入门

    AngularJS1.x 快速入门 AngularJS 是一个由 Google 主导开发的...以上是 AngularJS1.x 的基础知识和快速入门指南，通过学习和实践，你可以掌握这个强大的前端开发框架，为构建高效、可维护的 web 应用打下坚实的基础。

    AngularJS入门教程之MVC架构实例分析

    本文实例讲述了AngularJS的MVC架构。分享给大家供大家参考，具体如下： MVC应用程序架构最早于1970年起源于Smalltalk语言，后来在桌面应用程序开发中使用较为广泛，如今在WEB开发中也非常流行。MVC的核心思想是將...

    AngularJS入门教程之Select(选择框)详解

    AngularJS是一个流行的前端JavaScript框架，由Google团队开发，用以构建动态Web应用程序。其中，Select（选择框）控件是用户交互中常用的元素之一，它允许用户从一组选项中进行选择。AngularJS通过ng-options指令...

    利用Angularjs和Bootstrap前端开发案例实战

    - **实战案例介绍**：文档中提到构建一个猜数字的Web应用，这是一个入门级的实战案例，有助于学习者在实践过程中加深对AngularJS框架和MVC模式的理解。 - **MVC模式应用**：在案例中，系统数据存储在Model中，通过...

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