前端时间开发一个应用时,路由切换模块的时候需要传输数据。在网上查阅了写资料,细化了一些说明。一般有三种方式进行controller之间信息传递。
一,利用js的继承关系去传递controller之间的data,
我最早写在我自己的应用中的就是用的这种方法,我把第一视图的控制中获取到的data数据绑定到$rootScope上面
? ? ? ?当路由发生改变跳转到第二视图的时候,直接在用$rootScope.answer_sheet这个数据。其实严格意义上来说这并不是数据传输,只是利于js的继承关系,两个不同的子级共用父级的一个数据而已,而且两个子集都去改变父级的数据。这样操作并不好,会造成全局污染。
二,利用angular的事件去传递信息$on,$emit,$boardcast这几个方式来实现。$emit表示向上传递(父级),$boardcast表示向下传递(子级),$on监听angular的事件,接受传递的数据。
先讲讲这个三个方法的使用
$emit()方法带有两个参数。
1. name(字符串)
要发出的事件名称。
2. args(集合)
一个参数的集合,作为对象传递到事件监听器中。
$emit()方法返回了一个事件对象()。
从监听器中发出的一切异常都会传递到$exceptionHandler服务中。
实例scope.$emit('user:logged_in', scope.user);
$boardcast和$emit用法一样 传两个参数 name和args
scope.$broadcast('cart:checking_out', scope.cart);
3,$on是angular中的监听事件
要监听一个事件,我们可以使用$on()方法。这个方法为具有某个特定名称的事件注册了一
个监听器。事件名称就是在Angular中触发的事件类型。
例如,我们可以在路由变更过程被触发时,监听事件:
scope.$on('$routeChangeStart',
function(evt, next, current) {
// 一个新的路由被触发了
});
不管什么时候事件$routeChangeStart(路由将要变更的时候,会广播这个事件)被触发,
监听器(这个函数)都会被调用。
根据这三个方法的特性,$emit和$boardcast绑定事件name并传输数据agrs,用$on监听绑定的事件并接受数据
废话不多说直接上代码(可复制到编辑器运行)
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>angular的通讯</title>
<script src="http://zhouwei007.web3v测试数据/js/angular.js"></script>
</head>
<body>
<div ng-controller="ParentCtrl"> <!--父级-->
<div ng-controller="SelfCtrl"> <!--自己-->
<a ng-click="click()">click me</a>
<div ng-controller="ChildCtrl"></div> <!--子级-->
</div>
<div ng-controller="BroCtrl"></div> <!--平级-->
</div>
</body>
<script>
var app = angular.module('App' , []);
app.controller( 'SelfCtrl', function ($scope) {
$scope.click = function () {
$scope.$broadcast( 'to-child', 'child','child22' );
$scope.$emit( 'to-parent', 'parent' );
}
});
app.controller( 'ParentCtrl', function ($scope) {
$scope.$on( 'to-parent', function (event,data) {
console.log( 'ParentCtrl', data); // 父级能得到值
});
$scope.$on( 'to-child', function (event,data) {
console.log( 'ParentCtrl', data); // 子级得不到值
});
});
app.controller( 'ChildCtrl', function ($scope){
$scope.$on( 'to-child', function (event,data) {
console.log( 'ChildCtrl', data); // 子级能得到值
});
$scope.$on( 'to-parent', function (event,data) {
console.log( 'ChildCtrl', data); // 父级得不到值
});
});
app.controller( 'BroCtrl', function ($scope){
$scope.$on( 'to-parent', function (event,data) {
console.log( 'BroCtrl', data); // 平级得不到值
});
$scope.$on( 'to-child', function (event,data) {
console.log( 'BroCtrl', data); // 平级得不到值
});
});
</script>
</html>
三,通过自定服务传值
angular服务的方式
在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>angular的service传输数据</title>
<script src="http://zhouwei007.web3v测试数据/js/angular.js"></script>
</head>
<body >
<div ng-controller="MainCtrl">
<input type="text" ng-model="test" />
<div ng-click="change()">click me</div>
</div>
<div ng-controller="sideCtrl" ng-click="add()">
'数据传输'+ {{name}}
</div>
</body>
<script>
var app = angular.module('App' , []);
app.factory( 'instance', function (){
return {};
});
app.controller( 'MainCtrl', function ($scope, instance) {
$scope.change = function () {
instance.name = $scope.test;
};
});
app.controller( 'sideCtrl', function ($scope, instance) {
$scope.add = function () {
$scope.name = instance.name;
};
});
</script>
</html>
?
查看更多关于angular 控制器之前的通信和数据传输的详细内容...