`
bjtale
  • 浏览: 29540 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

angular.js自定义指令

阅读更多

   angular.js最为强大的地方在于可以通过自定义指令来扩展html元素,这种思路与JSP的taglib类似,但在实现细节上更为自由,并且自定义指令也可以提供表单元素交互、数据绑定、事件处理功能。

  创建自定义指令的基本格式为:

angular.module('myApp',[]).directive('myDirective',function(){
				return {
					restrict :'EA',
					scope:true,
					template:``//ES6多行字符支持,模板文本字符串,也可使用templateUrl
					replace:true,
					transclude:true,
					link:function(){
						//DOM operates.
					}
				}
			})

1.指令行为限制

A:用于限制属性,例如<div my-exp='something'></div>

E:用于限制元素,即可直接使用该指令作为html标签使用

C:用作html元素的class类。

2.指令作用域

最简单的做法是在创建自定义指令时将scope属性设置为 true从而共享父作用域,缺点是无法避免指令中修改父作用域的值。因此,通常的做法是为指令添加隔离作用域。在隔离作用域中,以下三个运算符的使用较为重要:

@:取DOM节点的属性值到隔离作用域中使用,

=:将$scope中的属性值与隔离作用域中的值进行双向绑定,

&:将$scope中的函数绑定到隔离作用域中(仅适用于函数)。

3.链接函数

自定义指令中可通过link函数修改DOM,通常被设置为一个postLink函数,实际上还可以设置一个preLink函数用于在元素链接之前执行。

 

以下示例提供了较为复杂的自定义指令,包含上述所有语法要点:

<!DOCTYPE HTML>
<html ng-app='myApp'>
	<head>
		<meta charset='utf-8'>
		<title>Event key</title>	
		<style type="text/css">
		.expander {
		    border: 1px solid black;
		    width: 250px;
		}

		.expander>.title {
		    background-color: black;
		    color: white;
		    padding: .1em .3em;
		    cursor: pointer;
		}

		.expander>.body {
		    padding: .1em .3em;
		}
		</style>
	</head>

	<body>
        <div ng-controller='SomeController'>
            <expander class='expander' title='title' click-fnc='clickFnc()'>
                {{text}}
            </expander>
        </div>
    </body>
		<script src='http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js'></script>
		<script>
			var app = angular.module('myApp',[]);

			app.controller('SomeController',function($scope){
				$scope.title = 'Click to expand';
				$scope.text = 'Some content inside this expander';
				$scope.clickFnc = function(){
					console.log("I'm clicked.");
				}
			})
			.directive('expander',function(){
				return {
					restrict:'EA',
					replace:true,
					transclude:true,

					scope: {
						title: '=title',
						clickFnc: '&clickFnc'
					},
					template:`<div>
						<div class='title' ng-click='toggle();clickFnc()'>{{title}}</div>
						<div class='body' ng-show='showMe' ng-transclude></div>
						</div>`,
					link:{
						pre:function preLink(scope,element,attrs){
							console.log("Pre link");
							
						},
						post:function postLink(scope,element,attrs){
							console.log("Post link.");
							scope.showMe = false;
							scope.toggle = function toggle(){
							scope.showMe = !scope.showMe;
							}

						}

					}
				}
			});

			
		</script>
	</body>
</html>
分享到:
评论

相关推荐

    Angular.js v1.8.3.zip

    Angular.js 是一个强大的JavaScript框架,由Google维护,用于构建单页应用(Single Page Applications, SPA)。这个版本,v1.8.3,是Angular.js的一个稳定版本,它提供了丰富的功能和改进,帮助开发者构建高性能、可...

    angular.js 本地引用

    在前端开发领域,AngularJS(通常简称为Angular.js)是一个非常流行且强大的JavaScript框架,由Google维护。这个框架主要用于构建动态、单页Web应用程序(SPA),它提供了丰富的功能来简化前端开发过程,包括数据...

    angular.js

    - **指令(Directives)**:Angular.js的一大创新是自定义DOM元素和属性的指令,如ng-repeat、ng-if等,它们增强了HTML的功能,使其能更好地表达应用逻辑。 - **表达式(Expressions)**:Angular.js的模板语言允许...

    angular.js-master.zip

    AngularJS 是一个强大的前端JavaScript框架,由Google维护,主要用于构建单页应用(SPA,Single Page Applications)。这个"angular.js-master.zip"压缩包很可能是AngularJS的源码仓库,特别是1.3版本的一个分支或...

    基于angular.js的WUI-DatePicker日期选择器插件

    Angular.js 是一个强大的前端JavaScript框架,它提供了丰富的功能和灵活性,用于构建动态、数据驱动的Web应用程序。而WUI-DatePicker是一款基于Angular.js开发的日期选择器插件,专为提高用户体验而设计,提供了多种...

    angular.min.v125.rar(亲测可用)

    3. **指令系统**:Angular.js通过自定义HTML指令扩展了DOM,允许创建行为丰富的用户界面,如ng-repeat、ng-click等。 4. **服务**:Angular.js提供了一系列内置服务(如$http、$scope、$location等),同时支持...

    Angular1.x自定义指令实例详解

    首先,创建自定义指令的基本步骤是通过调用`angular.module().directive()`方法。在这个例子中,我们创建了一个名为`unorderedList`的指令。`myApp`是我们的Angular模块,我们在其中注册了这个指令: ```javascript...

    Angular.js自定义指令学习笔记实例

    在Angular.js中,自定义指令是扩展框架功能和创建可重用组件的关键特性。通过自定义指令,开发者能够创建自己的HTML元素或属性,这些元素和属性具有特定的行为和交互。以下将详细介绍Angular.js自定义指令的创建过程...

    基于angular.js日期选择器.zip

    在Angular.js中,这通常通过自定义指令来实现。一个日期选择器的指令可能包含多个子指令,分别用于选择年、月、日、时和分。每个子指令可以监听用户的交互,并更新`ngModel`绑定的值。 对于年月日选择,我们可以...

    angular.js后台管理系统.zip

    Angular.js,作为一个强大的前端JavaScript框架,由Google维护,被广泛应用于构建复杂的单页应用(SPA)和后台管理系统。本篇将深入探讨Angular.js的核心特性、架构设计以及如何在实际项目中构建一个后台管理系统。 ...

    angular.js-master

    - **自定义指令**:开发者可以创建自己的指令,扩展HTML语法,如ng-repeat用于迭代数组,ng-show/hide控制元素的可见性。 - **内置指令**:AngularJS提供了一系列内置指令,如ng-model、ng-class等。 ### 9. 过滤...

    angular.js-1.6.9

    1.6.9版本继续支持这些基础指令,同时也支持自定义指令,以满足特定需求。 5. **控制器**:控制器是处理业务逻辑的地方,通过`ng-controller`指令关联到视图。在1.6.9中,虽然推荐使用组件化的方式替代控制器,但...

    angular.js+webapi Demo

    2. **指令(Directives)**:Angular.js提供了自定义HTML标签和属性的能力,如`ng-repeat`用于数据循环,`ng-if`用于条件渲染,`ng-model`用于双向数据绑定等。 3. **依赖注入(Dependency Injection)**:Angular....

    前端项目-c3-angular.zip

    - `style.css`:可能包含一些自定义样式,以适应C3.js图表在AngularJS应用中的展示。 3. **example** 或 **demo** 目录:演示示例,通常包括一个简单的AngularJS应用,展示了如何在实际项目中使用这个指令来创建...

    基于angular.js的分页导航

    2. 指令:AngularJS的自定义指令可以扩展HTML,使我们能够创建新的DOM元素或修改现有元素的行为。在分页导航中,我们可以创建一个`pagination`指令来封装分页逻辑。 二、分页导航组件 分页导航通常包括以下几个关键...

    angular-1.7.7.zip

    3. **指令系统**:Angular.js的指令扩展了HTML,使我们可以创建自定义的DOM元素和属性,用于实现复杂的业务逻辑。如`ng-repeat`用于数据遍历,`ng-if`控制条件渲染等。 4. **服务**:Angular.js的服务是可注入的...

    Angular.js.zip

    Angular.js,通常简称为Angular,是由Google维护的一个开源JavaScript框架,用于构建单页应用程序(SPA)。这个框架的主要目标是简化前端开发,通过提供强大的数据绑定和依赖注入机制,让开发者可以更加专注于应用...

    angular.js-1.3.0

    这个压缩包中的"angular.js-1.3.0-beta.16"文件包含了所有必要的JavaScript库,可以直接在项目中引用,以便利用AngularJS 1.3.0-beta.16的所有特性。不过,使用beta版本时需要注意可能存在不稳定因素,建议在生产...

    angular.min.js

    其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive)。后面会详细介绍。那么,什么又是动态web应用呢?与传统...

Global site tag (gtag.js) - Google Analytics