angularjs 1.x自定义指令之控制器与指令间的通讯
2018-03-16 18:12
423 查看
一、在指令中调用控制器里定义的方法
在指令中通过scope.$apply可以完成对控制器里方法的调用
使用这三种方式需要注意:
4000
指令的属性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>
//定义模块 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可以完成对控制器里方法的调用
使用这三种方式需要注意:
4000
指令的属性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(); }); } } });
控制器调用指令里的方法,可以通过发送广播,在指令内接收广播,然后在回调方法里执行指令中的方法
相关文章推荐
- AngularJS入门 AngularJS控制器 AngularJS常见内置指令
- AngularJS(三)——指令实战及自定义指令
- AngularJS实现自定义指令及指令配置项的方法
- AngularJS实现自定义指令与控制器数据交互的方法示例
- angularjs指令系统系列课程(5):控制器controller
- 我所理解的AngularJS指令和控制器的交互原理
- --@angularJS--指令与控制器之间的交互demo
- --@angularJS--指令与控制器之间较复杂的交互demo2
- 指令与控制器之间通讯
- AngularJS指令与控制器之间的交互功能示例
- AngularJS指令详解(2)—指令与控制器之间的交互
- AngularJs-指令和控制器交互
- Angularjs自定义指令之复制指令
- AngularJs开发——指令与控制器间的通信
- angularJs自定义指令:图片选择指令
- 基本的AngularJS指令及控制器
- AngularJS自定义指令及指令配置项
- angularjs中如何实现控制器和指令之间交互
- AngularJS自定义指令之复制指令实现方法
- 详解angularjs中如何实现控制器和指令之间交互