本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下angular控制器通信的4种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。【相关推荐:《angular教程》】
首先概括一下angular控制器通信的4种方式:
作用域继承。
通过$scope广播事件。
事件发射器模块。
服务。
1、作用域的继承
子作用域可以访问声明在它们的祖先作用域中的变量和函数。
1 2 3 4 5 6 7 8 9 10 11 | <div ng-controller= "Controller1" >
<div ng-controller= "Controller2" >
this prints '42' :{{answer}}
</div>
</div>
m.controller( 'Controller1' , function ( $scope ) {
$scope .answer = 42;
});
m.controller( 'Controller2' , function ( $scope ) {
console.log( $scope .answer);
});
|
2、通过$scope广播事件
$emit调用可以向作用域上方冒泡,$broadcast将向子孙作用域传播,$on可以注册监听器。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div ng-controller= "Controller1" >
<div ng-controller= "Controller2" >
</div>
</div>
m.controller( 'Controller1' , function ( $scope ) {
$scope . $on ( 'ping' , function (){
console.log( 'pong' );
});
$scope . $broadcast ( 'broadcast' );
});
m.controller( 'Controller2' , function ( $scope ) {
$scope . $emit ( 'ping' );
$scope . $on ( 'broadcast' , function (){
console.log( 'broadcast' );
});
});
|
3、事件发射器模块event-emitter
event-emitter模块工作方式类似于作用域发射器,它们有3个关键的区别:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script type= "text/javascript" src= "angular.js" ></script>
<script type= "text/javascript" src= "event-emitter.js" ></script>
<script type= "text/javascript" >
var app = angular.module( 'app' , []);
app.factory( 'userService' , function ( $timeout , $window ) {
var emitter = $window .emitter();
var user = {};
$timeout ( function () {
user.emit( 'error' , 'Could not connect to server' );
}, 1000);
return user;
});
app.factory( 'profileService' , function (userService) {
var ret = {
user: userService,
};
userService.on( 'error' , function () {
console.log( 'get error' );
});
return ret;
});
</script>
|
4、最常用的通信是服务
因为服务是单例,所以在任何组件内改变服务的值都将影响其他组件,用法很简单,只要把服务列为依赖就可以了,如以上代码所示。
更多编程相关知识,请访问:编程教学!!
以上就是浅谈angular控制器通信的4种方式的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
聊聊Angular指令中的prelink和postlink函数
深入了解Angular中的hostbinding和hostlistener装饰器
浅谈Angular模板指令:ng-template和ng-container的用法
浅谈Angular8兼容ie10+版本的方法
Angular如何创建服务?5种方式了解一下!
如何安装和使用Angular cli?(图文详解)
Angular怎么集成bootstrap4?方法介绍
详解Angular根模块与特性模块
浅谈Angular中父子组件间怎么传递数据
Angular和Angularjs间有什么关系
更多相关阅读请进入《Angular》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 浅谈angular控制器通信的4种方式