自定义指令
类似创造一个组件(标签),使得多个页面引用相同内容
自定义创建
app页面数据模型.directive()来创建的;
语法:app页面数据模型.directive('自定义指令名称必须小写',function(){
return {
restrict:'指令类型',
template:'指令结构即html内容',
replace:'指令复写'
};
});
(1)restrct:'指令类型'
1、指令类型:指令在页面中通过何种形式进行唤醒，分别为'A'/'E'/'C'/'M';
2、"A":指attribute,指令通过属性的方式唤醒
3、"E":指element,需要通过元素的方式来唤醒
4、"C":指class，需要通过类名方式来唤醒
5、"M":指comment,指令需要通过注释的方式来唤醒,该方式replace必须设置成true;
6、A'/'E'/'C'/'M';可单独写,也可组合写,功能累加
(2)template:'指令结构'
1、指令它通过template加载,则有且仅有一个根节点<!DOCUMENT html>,templateUrl加载则不是
2、页面中能够显示的html结构,如果是文件中加载的指令结构,则要写成templateUrl:'路径',和NG中的路由模块化加载类似
3、就是写html页面内容
(3)replace:'指令复写'
1、指令在页面存在时,是否会被当作成一个子元素添加到当前元素内
2、默认为false;表示指令结构中的内容作为子元素添加到父元素内
3、true;表示直接替换父元素
4、指令类型为"M"注释方式,则必须设置为true,因为注释没有父元素,所以不能通过false来父元素添加子元素实现
代码示例:
<html ng-app='app' ng-controller='main' >
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
<title ng-bind='mainTitle'></title>
<script src='js/angular.js'></script>
<script src='js/angular.route.min.js'></script>
<style>
</style>
</head>
<body >
<!-- 通过属性 -->
<!-- <div ssr></div> -->
<!-- 通过元素 -->
<!-- <ssr></ssr> -->
<!-- 通过类 -->
<!-- <div class='ssr'></div> -->
<!-- directive:ssr -->
<script>
var app=new angular.module('app',[]);
app.directive('ssr',function(){
return {
restrict:'ACEM',
template:'<div><button>指令button</button></div>',
replace:true
};
})
app.controller('main',['$scope',function($scope){
$scope.mainTitle='自定义指令';
}])
</script>
</body>
</html>
