简介
在常用指令的章节中我们讲了Angular提供的指令，这些指令是Angular内部封装好指令，我们开箱即用，但是有的时候我们想用一个独有的功能模块，比如点赞，那么系统没有提供给我们怎么办，这就要自定义指令来完成了，我们自己封装一个带有独特功能的指令，这就是自定义指令。
自定义指令模版
var app = angular.module("myApp", []);
app.directive("myDirective",function() {
return {
//配置项
}
})
自定义指令用法
<body ng-app="myApp">
<my-directive></my-directive>
<div class="my-directive"></div>
<div my-directive></div>
<!--directive:my-directive-->
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myController",["$scope",function($scope) {
$scope.name="Angular"
}])
app.directive("myDirective",function() {
return {
//配置项
//方式一
template: `
<h1>第一个自定义指令{{name}}</h1>
`
//方式二(一般情况下我们不适用这种方式)
template: function(tEle,tAttrs) {
//可以接收两个参数，第一个是element节点元素，第二个是节点上的属性值
tEle[0].setAttribute("attr","a")//tEle是个数组
return: "<div>第一个自定义指令</div>"
}
//模版地址
templateUrl: "home.html"，
replace: true，
restrict:"ECMA"，
controller: "myController",//前提改控制器必须被注册
controller: ["$scope",function($scope) {
$scope.name = "angular"
}]
}
})
</script>
myDirective：自定义指令的名称。
template：模版就是自定义指令要现实的内容，其实就是html。
my-directive：显示自定义指令，因为html不区分大小写，所以驼峰式命名要以第二个大写字母为分水岭用'-'隔开。
templateUrl:模版地址，这样我们可以将模块抽离成单个的html，使代码更简洁。
replace: 如果为true，将会解析自定义指令模版内部内容最显示。例如
<my-directive><h1>第一个自定义指令</h1></my-directive>,将会解析为
<h1>第一个自定义指令</h1>。
restrice:渲染模式,E-标签 C-class A-属性 M-注视。注意使用A，replace必须为true。
controller：控制器。
输出结果：第一个自定义指令
不积跬步无以至千里,不积小流无以成江海
网友评论