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 会报错，所以，指令模板必须要有一个根元素包裹。
时间： 2024-07-31 13:41:21