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

angularJs编写多指令的情况

2015-09-16 17:55 751 查看

本实例主要展示controller和link参数的使用.以及多个指令同时作用的情况.

<!DOCTYPE html>
<html ng-app="myModule">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div>
<superman strength>动感超人---力量</superman>
</div>
<div>
<superman strength speed>动感超人---力量+速度</superman>
</div>
<div>
<superman strength speed light>动感超人---力量+速度+发光</superman>
</div>
</div>

</body>
<script type="text/javascript" src="../js/angular1.4.3.js"></script>
<script type="text/javascript">
var myModule=angular.module("myModule",[]);
myModule.directive("superman", function () {
return{
scope:{},
restrict:"AE",
controller:function($scope){
$scope.abilities=[];
this.addStrength= function () {
$scope.abilities.push("strength");
};
this.addSpeed= function () {
$scope.abilities.push("speed");
};
this.addLight= function () {
$scope.abilities.push('light');
};
},
link: function (scope,element,attrs) {
element.bind("mouseenter", function () {
console.log(scope.abilities);
})
}
}
});
myModule.directive("strength", function () {
return{
require:"^superman",
link: function (scope, element, attrs, supermanCtrl) {
supermanCtrl.addStrength();
}
}
});
myModule.directive("speed", function () {
return{
require:"^superman",
link: function (scope, element, attrs, supermanCtrl) {
supermanCtrl.addSpeed();
}
};
});
myModule.directive("light", function () {
return{
require:"^superman",
link: function (scope,element,attrs,supermanCtrl) {
supermanCtrl.addLight();
}
}
})
</script>
</html>

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

标签：

相关文章推荐

新的分享

章节导航