序
本文描述的是一个已经“过时”的框架angularjs的指令相关知识点，仅作为学习参考，如有不对敬请谅解。
指令调用方式
restrict是申明标识符在模板中作为元素，属性，类，注释或组合，如何使用。
| 字母 | 风格 | 示例 |
|---|---|---|
| E | 元素 | <app-hello></app-hello> |
| A | 属性 | <div app-hello></div> |
| C | 类 | <h3 class="app-hello"></h3> |
| M | 注释 | <!-- directive: app-hello --> |
- 由于类和注释的方式容易造成误解，通常采用“EA”两种方式进行调用
- 当需要创建带有自己的模板的指令时，使用元素名称的方式创建指令
- 当需要为已有的HTML标签增加功能时，使用属性的方式创建指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>angularjs 自定义指令 directive</title>
<meta name="author" content="loushengyue">
</head>
<body ng-app="app">
<app-hello></app-hello>
<div app-hello></div>
<h3 class="app-hello"></h3>
<!-- directive: app-hello -->
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'EACM', //E代表标签，A代表属性，C代表class，M代表注释
replace: true,
template: '<h1>hello world.</h1>' //特别注意这里只能有一个根节点
}
})
</script>
</body>
</html>指令传参方式
| 符号 | 类型 | 案例 | 其他写法(注意：调用时的名字 == 属性名) |
|---|---|---|---|
| @ | 传递字符串 | title: '@attrTitle' |
attrTitle: '@' |
| = | 传递变量 | name: '=attrName' |
attrName: '=' |
| & | 传递函数 | greet: '&attrGreet' |
attrGreet: '&' |
<body ng-app="app" ng-controller="ctrl">
<app-hello attr-title="hello"
attr-name="name"
attr-greet="greet()"></app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.name = 'loushengyue';
$scope.greet = function () {
alert('hello ' + this.name);
}
}])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
scope: {
title: '@attrTitle', //传递字符串
name: '=attrName', //传递变量
greet: '&attrGreet' //传递函数
},
template: '<div>' +
'<h1>{{title}} <small>{{name}}</small></h1>' +
'<button ng-click="greet()">greet</button></div>'
}
})
</script>
</body>transclude插槽
<body ng-app="app">
<app-hello>看看我最后到哪里去了！！！</app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
transclude: true,
template: '<div><h1 ng-transclude>事实上</h1><br><button>Great</button></div>'
//注意ng-transclude只能放在双标签标签上，并替换其内容
}
})
</script>
</body>通过trasculde实现指令嵌套
<body ng-app="app">
<app-hello>
<app-son></app-son>
</app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
transclude: true,
template: '<div><h1 ng-transclude>子指令插槽位置</h1><br><button>Great</button></div>'
//注意ng-transclude只能放在双标签标签上，并替换其内容
}
})
.directive('appSon', function () {
return {
restrict: 'AE',
replace: true,
template: '<span>I love you.</span>'
}
})
</script>
</body>指令中的函数返回参数规则
注意指令内的变量作为参数往父级作用域传参的规则是需要添加“{}”，同时还需要与调用方的函数形参名称一致。
<body ng-app="app" ng-controller="ctrl">
<!--注意：greet(name)中的name是跟指令里的name匹配的，不能随意起名-->
<app-hello attr-greet="greet(name)"></app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.greet = function (user) {
alert(user);
}
}])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
scope: {
greet: '&attrGreet'
},
template: '<div>' +
'<input type="text" ng-model="username">' +
'<button ng-click="greet({name: username})">greet</button></div>',
//注意：参数回传时方法内需要加“{ }”，并且键名称与调用处的形参相同
link: function (scope, element, attrs) {
scope.username = 'hello loushengyue';
}
}
})
</script>
</body>link函数
<body ng-app="app">
<app-hello name="娄笙悦"></app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
template: '<div>' +
'<h1>{{title}}</h1>' +
'<button ng-click="greet()" id="btn">greet</button></div>',
link: function (scope, element, attrs) {
scope.title = 'hello loushengyue'; //可以声明局部变量（类似于控制器）
scope.greet = function () { //可以声明局部函数（类似于控制器）
alert(this.title);
};
element[0].style.backgroundColor = 'red'; //指令元素背景色变为红色
console.log(attrs.name) //调用指令时传入的属性 name-->娄笙悦
}
}
})
</script>
</body>controller函数
<body ng-app="app">
<app-hello name="娄笙悦"></app-hello>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.directive('appHello', function () {
return {
restrict: 'AE',
replace: true,
template: '<div>' +
'<h1>{{title}}</h1>' +
'<button ng-click="greet()" id="btn">greet</button></div>',
controller: function ($scope, $element, $attrs, $transclude) {
$scope.title = 'hello loushengyue'; //可以声明局部变量
$scope.greet = function () { //可以声明局部函数
alert(this.title);
};
$element[0].style.backgroundColor = 'red'; //指令元素背景色变为红色
console.log($attrs.name) //调用指令时传入的属性 name-->娄笙悦
}
}
})
</script>
</body>最要命的是弄清楚 compile ，controller， link 函数之间的区别，点击参考链接