标签:详解 class space 根据 内容 通过 logs 自定义 module
Angularjs 允许根据实际业务需要自定义指令, 通过angular全局对象下的 directive
方法实现。可以自定义属性、自定义标签、自定义功能
接下来定义一个名叫custom的指令,并利用这个自定义指令来实现元素的替换
html代码:
<body ng-app="app"> <p custom></p> <custom></custom>
js代码:
var app = angular.module("app",[]); //自定义指令和定义控制器相似 app.directive("custom",[function () { return{ //返回指令对象 restrict:"EA", template:"<h1>这是第一个自定义指令模板<p>p标签元素</p></h1> ", replace:true,
} }])
directive:表示我们要定义一个自定义的指令,指令的名称为 custom,后面的函数用来定义指令的特征, 回调函数中返回的是一个指令对象
restrict:是指令的类型,有四种取值:
① E:以元素的方式出现
② A:以属性的方式出现
③ C:以类的方式出现(用的比较少)
④ M:以注释的方式(用的少)
template:是指令模板
replace:顾名思义,这是替换的意思,默认为 false,就是将模版的内容追加到元素中,如果设置为 true,那么模版的内容将会替换元素的内容
这里有一个注意点,如果
template:"<h1>这是第一个自定义指令模板</h1><p>p标签元素</p> ",
replace:true,
这种情况下,没有包裹的根元素,h1 和 p是同级元素的情况下,使用 replace:true 会报错,所以,指令模板必须要有一个根元素包裹。
angular 自定义指令 详解--restrict、restrict、replace
标签:详解 class space 根据 内容 通过 logs 自定义 module
原文地址:http://www.cnblogs.com/xiaoyanZhang/p/6883095.html