指令与控制器之间的交互

1、指令与控制器交互

<div ng-controller="MyCtrl">
<loader>滑动加载</loader>
</div>

angular.module("MyCtrl",[])
.controller("myCtrl"，["$scope",function(){
$scope.loadData = function(){
console.log("数据加载中");
}
}])
.directive("loader",function(){
return {
restrict:"AE",
link:function(scope,element,attr){
element.bind("mouseenter",function(){
scope.loadData();
//scope.$apply("loadData()");
})
}
}
});

$apply 方法传播 Model 的变化，用来刷新模型视图

2、指令与多个控制器进行交互

<div ng-controller="myCtrl">
<loader howToLoad="loadData()">滑动加载</loader>
</div>
<div ng-controller="myCtrl2">
<loader howToLoad="loadData2()">滑动加载</loader>
</div>

angular.module("MyCtrl",[])
.controller("myCtrl"，["$scope",function(){
$scope.loadData = function(){
console.log("数据加载中");
}
}])
.controller("myCtrl2"，["$scope",function(){
$scope.loadData2 = function(){
console.log("数据加载中2");
}
}])
.directive("loader",function(){
return {
restrict:"AE",
link:function(scope,element,attr){
element.bind("mouseenter",function(){
scope.$apply(attr.howtoload);
})
}
}
});

注意，html中使用驼峰命名的时候，在directive中要使用小写

3、指令与指令之间进行交互

<div class="row">
<div class="col-md-3">
<superman strength>动感超人---力量</superman>
</div>
</div>
<div class="row">
<div class="col-md-3">
<superman strength speed>动感超人2---力量+敏捷</superman>
</div>
</div>
<div class="row">
<div class="col-md-3">
<superman strength speed light>动感超人3---力量+敏捷+发光</superman>
</div>
</div>

var myModule = angular.module("MyModule", []);
myModule.directive("superman", function() {
return {
scope: {},//创建独立作用域
restrict: 'AE',
//指令内部控制器，暴露一组public函数，给外部调用
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.addClass('btn btn-primary');
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();
}
}
});

controller中写供外部调用的方法，link处理指令内部事务