directive 指令间交互
2017-03-21 本文已影响41人
幸福幸福幸福
大漠在慕课网的一个例子代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../framework/bootstrap.min.css">
<script src="../framework/angular.js"></script>
</head>
<body>
<div ng-app="myModule" class="row">
<div class="col-md-3">
<superman strength>动感超人---力量</superman>
</div>
<div class="col-md-4">
<superman strength speed>动感超人2---力量+敏捷</superman>
</div>
<div class="col-md-5">
<superman strength speed light>动感超人3---力量+敏捷+动感光波</superman>
</div>
</div>
<script>
var myModule = angular.module('myModule', []);
myModule.directive("superman", function ()
{
return {
scope: {},
restrict: 'AE',
controller: function ($scope)
{ //一般对于想要暴露出去让其他地方调用的方法选择写在controller内，通过require调用，但是需要注意，只能调用上级指令
$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)
{ //对于指令内部的一些操作选择写在link内
element.addClass('btn btn-primary');
element.bind('mouseenter', function ()
{
console.log(scope.abilities);
});
}
}
});
myModule.directive("strength", function (){
return {
require:'^superman', //依赖superman指令
link:function(scope,ele,attrs,supermanCtrl){//SupermanCtrl是superman指令暴露的对象接口
supermanCtrl.addStrength();//通过supermanCtrl来调用superman指令内controller定义的一些方法
}
}
});
myModule.directive("speed", function (){
return {
require:'^superman',
link:function(scope,ele,attrs,supermanCtrl){
supermanCtrl.addSpeed();
}
}
});
myModule.directive("strength", function (){
return {
require:'^superman',
link:function(scope,ele,attrs,supermanCtrl){
supermanCtrl.addLight();
}
}
});
</script>
</body>
</html>
注意看代码中注释部分，对于想要暴露给其他指令用的参数我们通常将他写在controller内，调用的时候通过require先将指令注入，然后在link的第四个参数处来规定注入指令的对象接口，可以通过这个对象来调用依赖的那个指令内的controller内的方法。
而对于一些指令内操作，往往选择写在link参数内
