您的位置：首页 > Web前端 > JavaScript

angular.js学习(1)--指令之间的交互--动感超人

2016-10-05 15:55 603 查看

strman、speman、litman都依赖于superman

当定义可以让外部调用的函数时，放在directive中，内部自己的绑定的事件放在link中

//动感超人，四个指令

superman.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>superman</title>
<script src="../angular-1.5.8/angular.js"></script>
<script src="superman.js"></script>
<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.0/dist/css/bootstrap.min.css"  />
</head>
<body>
<div class="row">
<div class="col-md-12">
<superman strman>超人--力量</superman>
</div>
</div>
<div class="row">
<div class="col-md-12">
<superman strman speman>超人2--力量+敏捷</superman>
</div>
</div>
<div class="row">
<div class="col-md-12">
<superman strman speman litman>超人3--力量+敏捷+发光</superman>
</div>
</div>
</body>
</html>

Superman.js

var app = angular.module("app",[]);
app.directive("superman",function(){
return{
scope:{},
restrict:"AE",
controller:function($scope){
$scope.arr = [];
this.addStr = function(){
$scope.arr.push("str");
}
this.addSpe = function(){
$scope.arr.push("spe");
}
this.addLit = function(){
$scope.arr.push("lit ");
}
},
link:function(scope,element,attr){
element.addClass("btn btn-primary");
element.bind("mouseenter",function(){
console.log(scope.arr);
})
}
}
})
app.directive("strman",function(){
return {
require:'^superman',
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addStr();
}
}
})
app.directive("speman",function(){
return {
require:'^superman',
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addSpe();
}
}
})
app.directive("litman",function(){
return {
require:'^superman',
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addLit();
}
}
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航