背景:
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);
})