angularjs跨页面传值

背景:

1.文件夹格式:
angularjs跨页面传值_第1张图片

2.页面路由:

var states = [
	['forgot', '/forgot', '/forgot.html'],
	['main', '/main', '/main.html',true],
]

3.设置跳转:

// config
app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider) {
	app.registerCtrl = $controllerProvider.register;
	states.forEach(function (s) {
		$stateProvider.state(s[0], {
			url: s[1], 
			templateUrl: 'html/' + s[2]   //html文件夹下的html
		});
	});
	$urlRouterProvider.otherwise('/login');
});

方法汇总:

1.父级通过$broadcast传值给子级:(当且仅只刷新子级页面时,就会无法获得type)

//父级controller传递值:
$scope.$broadcast('type', ‘1’);  
//子级controller接收值:
$scope.$on('type', function(event, data) {  
	console.log(data);
});  

2.子级通过$emit传值给父级:

//传递数据的子级controller
$scope.$emit('user', ‘2’);  
//接收数据的父级controller
$scope.$on('user', function(event, data) {  
	console.log(data);
});  

3.兄弟级之间通过父级相互传值:

//传递数据的子级A controller
$scope.$emit('userName', ‘小红’); 
//接收数据并传递数据的父级controller
$scope.$on('userName', function(event, data) {  
	//接收到数据并传给子级B controller
	$scope.$broadcast('name', data);  
}); 
//接收数据的子级B controller
$scope.$on('name', function(event, data) {  
	console.log(data);
});

4.基于ui-router的页面跳转传参(state.go):

states里的main信息,需要修改一下:

var states = [
	['forgot', '/forgot', '/forgot.html'],
	['main', '/main/:userId/:userRole', '/main.html',true],
]
//从login controller 里传值:

app.controller(‘loginCtrl’, function($scope, $state) {
$scope.domClick =function(){
$state.go(‘main’,{userId : “12”, userRole:“员工”});
}
})

//在main controller里接收需要的值:
app.controller('mainCtrl', function($scope, $stateParams) {
	// 接收参数需要用到$stateParams,可以console.log出来看一下长什么样子,就知道怎么用了
	console.log($stateParams);
	$scope.user ={
		user_id:$stateParams.userId,
		role:$stateParams.userRole
	}
})

4.基于ui-router的页面跳转传参(ui-sref):

//html

//main controller
app.controller('mainCtrl', function($scope, $stateParams) {
	console.log($stateParams);
})

你可能感兴趣的:(AngularJs)