AngularJS提供了一系列的内置指令,如ng开头的指令,同时AngularJS也允许用户自定义指令。

目录:

  1.自定义指令

  2.使用自定义指令

  3.自定义指令的内嵌使用

自定义指令

AngularJS中使用directive()方法来自定义指令,directive() 方法可以接受两个参数:

  name(字符):指令的名字,用来在视图中引用特定的指令

  factory_function(函数):这个函数返回一个对象,其中定义了指令的全部行为

例如:创建一个test指令:

var app = angular.module('myApp',[]);
app.directive('hello',function(){
return {
restrict:'AECM',
template:'<div>hello world</div>',
replace:true
};
});

说明:

在directive方法的第二个函数参数中,返回了一个对象,字段的意义如下:

restrice:定义了标签的使用方法,一共四种,分别是AECM

template:定义标签的模板。里面是用于替换自定义标签的字符串

repalce:是否替换

另外还有transclude:标识是否嵌套

使用自定义指令

指令在html中的使用有4中方法,分别对应restrice的标签的4个使用方法AECM

A:属性

<div hello></div>--------><div>hello world</div>

E:元素

<hello></hello>--------><div hello="">hello world</div>

C:样式(class的值)

<div class="hello"></div>------><div class="hello">hello world</div>

M:注释

<!-- directive:hello ----------->各个版本不一样

自定义指令的内嵌使用

app.directive('test',function(){
return {
restrict:'AECM',
template:'<div>hello <div ng-transclude></div> world</div>',
transclude:true
};
});

说明:自定义指令的内嵌使用需要将transclude字段赋值为true,template中使用ng-transclude来确定内嵌的位置。

实例代码如下:

<!DOCTYPE>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.3.1/angular.min.js"> </script>
</head>
<body>
<div></div>
<hello></hello>
<div></div>
<div hello></div>
<div></div>
<div class="hello"></div>
<div></div>
<!-- directive:hello -->
<div></div>
<hello></hello>
<div></div>
<test></test>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.directive('hello',function(){
return {
restrict:'AECM',
template:'<div>hello world</div>',
replace:true
};
}); app.directive('test',function(){
return {
restrict:'AECM',
template:'<div>hello <div ng-transclude></div> world</div>',
transclude:true
};
});
</script>
</body>
</html>

AngularJS---自定义指令的更多相关文章

  1. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  4. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  5. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

  6. AngularJs自定义指令详解(6) - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  7. angularJs自定义指令.directive==类似自定义标签

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...

  8. angularJS——自定义指令

    主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...

  9. AngularJS自定义指令(Directives)在IE8下的一个坑

    在项目中,由于要兼容到IE8,我使用1.2.8版本的angularJS.这个版本是支持自定义指令的.我打算使用自定义指令将顶部的header从其他页面分离.也就是实现在需要header的页面只用在&l ...

  10. 利用angularJs自定义指令(directive)实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

随机推荐

  1. 2014西安现场赛F题 UVALA 7040

    地址 题意:求在m种颜色中挑选k种颜色,给n个花朵涂色有几种方法. 分析:画图可以发现,基本的公式就是k ×(k-1)^(n-1).但这仅保证了相邻颜色不同,总颜色数不超过k种,并没有保证恰好出现k种 ...

  2. 用powershell批量新增user profile

    SharePoint 2013 新系统,要在User Profile Service里把人全加一下,其实同步ad更方便,但ad里的人太多,没必要全要,只要大中华区就行了,问hr要了一份人员名单,写了个 ...

  3. esrdtfyghjk

    两融余额止跌回升,金融股回落飘绿,千股涨停续演,沪指收复4000点未果涨逾2% 相关报道 [今日收盘]灾后重建激情抢筹 大盘两日反弹500点 [今日收盘]沪指涨近6%重回3700点 未停牌个股九成涨停 ...

  4. height与line-height的深入理解及应用

    转载:原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高" ...

  5. 5种io模式

    1)阻塞I/O(blocking I/O) 发起请求,等待数据报准备好,拷贝数据,数据返回指令 应用程序调用一个IO函数,导致应用程序阻塞,等待数据准备好. 如果数据没有准备好,一直等待….数据准备好 ...

  6. Latex 数学符号

    本文完全转自 <常用数学符号的 LaTeX 表示方法>,在此转载仅仅为了便于查阅,谨向原作者致以崇高的敬意. 常用数学符号的 LaTeX 表示方法 (以下内容主要摘自“一份不太简短的 LA ...

  7. C#中web页面之间传递数组参数

    一直以来用到的都是在url地址中传递string类型,那么如果是数组类型的该怎么传递呢? ]; arryStr[] = "a"; arryStr[] = "b" ...

  8. 【Cocos2d-x 3.x】 动作类Action源码分析

    游戏设计中,动作是不可缺少的,Cocos2d-x中所有的动作都继承自Action类,而Action类继承自Ref和Clonable类,整个动作类继承体系如图: FiniteTimeAction是所有瞬 ...

  9. php中关于Map热点的运用

    给图像使用map标签,可以给图像的某个部分建立超连接 一般情况下用在图片上,如:<img src="Images/banner.gif" width="780&qu ...

  10. 文件操作 模式r+与w+

    r+与w+ r+是读写模式,在文件的末尾进行追加操作. >>> myfile=open('pwd.txt', ... 'r+') >>> myfile.read() ...