angular 自定义指令 详解--restrictrestrictreplace
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angular 自定义指令 详解--restrictrestrictreplace相关的知识，希望对你有一定的参考价值。
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 自定义指令 详解--restrictrestrictreplace的主要内容，如果未能解决你的问题，请参考以下文章