-
Notifications
You must be signed in to change notification settings - Fork 19
Expand file tree
/
Copy pathangularjs_require2.html
More file actions
131 lines (124 loc) · 4.25 KB
/
angularjs_require2.html
File metadata and controls
131 lines (124 loc) · 4.25 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS·Hello AngularJS</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
<style>
.demo{
margin-bottom:10px;
border-top:1px solid #1b926c;
}
footer{
color:#fff;
background-color: #222;
border-color: #080808;
padding-top:60px;
margin-top:100px;
}
</style>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="../index.html">首页</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="javascript:void(0)">Link</a></li>
<li><a href="javascript:void(0)">Link2</a></li>
</ul>
</div>
</nav>
</div>
<div class="container" ng-app="MyAPP">
<siteheader></siteheader>
<h3>自定义指令中的属性require,实现指令间互相通信示例</h3>
<add minor class="col-md-12">
<div >次数: {{ count }}</div>
<br/>
<figure></figure>
</add>
<sitefooter></sitefooter>
</div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>
/** 示例源自：http://my.oschina.net/u/2342955/blog/411508
* require为字符串代表另外一个指令的名字。
* require会将控制器注入到其所指定的指令中，
* 并作为当前指令的链接函数的第四个参数。
* 字符串或数组元素的值是会在当前指令的作用域中使用的指令名称。
* 在任何情况下，ng编译器在查找子控制器时都会参考当前指令的模板。
*/
var app=angular.module("MyAPP",[]);
//增加操作的指令：
app.directive("add",function(){
return{
restrict:'ECMA',
controller:function($scope){
$scope.count=0;
this.addCount=function(){
$scope.$apply(function(){
$scope.count++;
})
}
}
}
});
//减少操作的指令：
app .directive("minor",function(){
return{
restrict:'ECAM',
controller:function($scope){
this.reduceCount=function(){
$scope.$apply(function(){
$scope.count--;
})
}
}
}
});
//主指令：
app.directive("figure",function(){
return{
restrict:'ECMA',
template:'<button id="add" class="btn btn-default">增加</button> '+
'<button id="minor" class="btn btn-danger">减少</button>'+
'<div>{{ figureCtrl.temp }}</div>',
require:['?^add','?^minor'],
controller:function(){
this.temp="这个属性被隔离开，可通过controllerAs创建的动态对象调用";
},
controllerAs:'figureCtrl',
link:function(scope,element,attrs,resultCtrl){
angular.element(document.querySelector('#minor')).on('click',resultCtrl[1].reduceCount);
angular.element(document.querySelector('#add')).on('click',resultCtrl[0].addCount);
}
}
});
/**
* 注意点：
1.由于add和minor指令都已被注入resultCtrl数组中，所以想调用它们的控制器中的方法，就可以使用resultCtrl[i].fun()的方式;
2.更新count的值，但视图是不会改变的，所以需要通过手动$apply()的方式来更新;
3.controllerAs实际上是把controller创建为一个对象，并且是隔离的。
*
*/
//公共区域，页头和页脚
app.directive('siteheader',function(){
return {
restrict:"E",
replace:true,
templateUrl:"views/header.html"
}
});
app.directive('sitefooter',function(){
return {
restrict:"E",
replace:true,
templateUrl:"views/footer.html"
}
});
</script>