/
index.html
137 lines (134 loc) · 4.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
div.demo {
padding-bottom: 10px;
border-bottom: 1px solid grey;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="transcludeDemo">
<div class="demo">
<p>正常的：{{ customer.name }}</p>
</div>
<div class="demo" my-iso-demo>
<p>隔离的： {{ customer.name }}</p>
</div>
<div class="demo" myIsoInheritDemo>
<p>隔离继承的： {{ customer.name }}</p>
</div>
<div class="demo">
<p>my-transclude-demo</p>
<div my-transclude-demo>
<p>transclude 的：{{ customer.name }}</p>
</div>
</div>
<div class="demo">
<p>my-transclude-demo-with-replace</p>
<div my-transclude-demo-with-replace>
<p>transclude replace 的：{{ customer.name }}</p>
</div>
</div>
<div class="demo">
<p>my-transclude-element-demo</p>
<div my-transclude-element-demo>
<p>transclude element 的：{{ customer.name }}</p>
</div>
</div>
<div class="demo">
<p>my-transclude-element-replace-demo</p>
<div my-transclude-element-replace-demo>
<p>transclude element replace 的：{{ customer.name }}</p>
</div>
</div>
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript">
(function() {
myApp = angular.module('myApp', [])
// 定义 controller
.controller("transcludeDemo", ["$scope", function($scope) {
$scope.customer = {
name: "Laisky"
};
}])
// 隔离的 directive
// scope: {} 为 directive 创建了自己的空 scope
// 所以 DOM 中的 {{ customer }} 会取到 undefined
.directive('myIsoDemo', function() {
return {
restrict: 'A',
scope: {},
template: "隔离的 template： {{ customer.name }}"
};
})
// 通过定义 scope 为 true，
// 会原型继承于 parent（即上一层 controller） 的 scope
// DOM 中的 {{ customer }} 等于的 scope
.directive('myIsoInheritDemo', function() {
return {
restrict: 'A',
scope: true,
template: "隔离继承的 template： {{ customer.name }}"
};
})
// transclude 会创建自己的 scope
// 默认情况下是继承于 parent 的 scope
// transclude 语句的作用是将标记了该 directive 的语句插入到 template 中标记了 ng-transclude 的 DOM 之内
// 默认情况下只插入该 directive DOM 的内容插入 ng-transclude
// 并且会保留 transclude DOM
.directive('myTranscludeDemo', function() {
return {
restrict: 'A',
scope: {},
transclude: true,
templateUrl: "transclude-template"
};
})
// 加上 replace 后会替换掉 directive DOM
.directive('myTranscludeDemoWithReplace', function() {
return {
restrict: 'A',
scope: {},
transclude: true,
replace: true,
templateUrl: "transclude-template"
};
})
// 将 transclude 指定为 element，而没有指定 replace 的话会注释掉该 element
.directive('myTranscludeElementDemo', function() {
return {
restrict: 'A',
scope: {},
transclude: 'element',
templateUrl: "transclude-template"
};
})
// 设置 replace 为 true，并将 transclude 设置为 element
// 会将 directive DOM 本身也插入
.directive('myTranscludeElementReplaceDemo', function() {
return {
restrict: 'A',
scope: {},
transclude: 'element',
replace: true,
templateUrl: "transclude-template"
};
})
})()
</script>
<script type="text/ng-template" id="transclude-template">
<div class="outside">
<div ng-transclude>
<div class="inside">
</div>
</div>
</div>
</script>
</body>
</html>