一、在指令中调用控制器里定义的方法
//html
<div ng-controller="MyCtrl">
<loader howToLoad="loadData()">滑动加载</loader>
</div>
//定义模块
var myModule = angular.module("MyModule", []);
//controller
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.loadData=function(){
console.log("加载数据中...");
}
}]);
myModule.directive("loader", function() {
return {
restrict:"AE",//Element,Attribute
scope: true,//新建一个作用域,该作用域继承父scope
link:function(scope,element,attrs){
//调用控制器里定义的方法有以下3种方式:
//scope.loadData(); //方式1
//scope.$apply("loadData()"); //方式2
setTimeout(function(){
scope.$apply(attrs.howtoload());//方式3,推荐使用
})
}
}
});
在指令中通过scope.$apply可以完成对控制器里方法的调用
使用这三种方式需要注意:指令的属性scope为true和false时,才能调用成功;scope为{}时,不会成功调用
指令的属性scope取值:
- scope: false,定义指令时,scope属性默认为为false,直接使用父scope。修改父scope会改变子scope的值,同样修改子scope也会改变父scope的值。
- scope: true,新建一个作用域。一开始是绑定在父scope中,但当修改位于自定义指令中的输入框时,子scope就被创建并继承父scope了。之后,修改父scope并不能影响子scope的值,而修改子scope也不会改变父scope的值。
- scope: { },创建一个新的“隔离”scope,但仍可与父scope通信隔离的scope,通常用于创建可复用的指令,也就是它不用管父scope中的model。然而虽然说是“隔离”,但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种:
- @:单向绑定,外部scope能够影响内部scope,但反过来不成立
- =:双向绑定,外部scope和内部scope的model能够相互改变
- &:把内部scope的函数的返回值和外部scope的任何属性绑定起来
二、在控制器中发送消息给指令
//html
<div ng-controller="MyCtrl">
<loader howToLoad="loadData()">滑动加载</loader>
</div>
//controller
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.loadData=function(){
$scope.$broadcast('approvalRecord.reloadData');//向子作用域发送广播
}
}]);
myModule.directive("loader", function() {
return {
restrict:"AE",//Element,Attribute
scope: true,//新建一个作用域,该作用域继承父scope
function reloadData(){
//TODO
}
//接收广播
scope.$on('approvalRecord.reloadData', function(){
reloadData();
});
}
}
});
控制器调用指令里的方法,可以通过发送广播,在指令内接收广播,然后在回调方法里执行指令中的方法