今天,碰见从一个页面打开新的页面,保证原来页面的信息不丢失,新的页面上还要有原来页面上传过去的信息。
为了解决这个问题,就看了一下Angular的页面跳转。
跳转新页面
$storage.mysql_user_conf = $scope.doc.conf.output.mysql
__url = $state.href('applications-mysql-check', {basicType:8})
window.open(__url, '_blank')
页面切换及传值
1、基于ui-router的页面跳转传参
## 方法一:
state('producers', {
url: '/producers',
templateUrl: 'views/producers.html',
controller: 'ProducersCtrl'
})
.state('producer', {
url: '/producer/:Id',
templateUrl: 'views/producer.html',
controller: 'ProducerCtrl'
})
## 方法二:
.controller('ProducersCtrl', function ($scope, $state) {
$scope.toProducer = function (producerId) {
$state.go('producer', {producerId: Id});
};
});
.controller('ProducerCtrl', function ($scope, $state, $stateParams) {
var producerId = $stateParams.Id;
});
## 在路由配置里要对传的参数设置为null
$stateProvider
.state('login', {
url: "/login.html",
templateUrl: "xxx/login.html",
data: {pageTitle: '登陆'},
params: {'test': null},
controller: "xxxController",
})
2、基于factory的页面跳转传参
MetronicApp.factory 'mysqlUserConfFactory', [ ->
userServices = {}
userconf = {}
_set = (data) ->
userconf = data
_get = ->
return userconf
userServices.setUserConf = _set
userServices.getUserConf = _get
return userServices
#把对应的factory注入到相应的controller里,用userServices的方法获取全局的数值。
3、基于localStorage或sessionStorage的页面跳转传参
$scope.$storage = $localStorage.$default({
counter: 0
});
counterFactory.updateCounter().then(function (data) {
$scope.$storage.counter = data.counter;
});
$scope.counter = $localStorage.counter;
$scope.$watch('counter', function(newVal, oldVal) {
## 监听变化,并获取参数的最新值
$log.log('newVal: ', newVal);
});
4、基于factory和$rootScope.$broadcast()的传参
.factory('addressFactory', ['$rootScope', function ($rootScope) {
var address = {};
address.components = [];
// 定义更新地址函数,通过$rootScope.$broadcast()设置全局事件'AddressUpdated'
// 所有子作用域都能监听到该事件
address.updateAddress = function (value) {
this.components = value.slice();
$rootScope.$broadcast('AddressUpdated');
};
return address;
}]);
var component = {
addressLongName: xxxx,
addressShortName: xxxx,
cityLongName: xxxx,
cityShortName: xxxx
};
$scope.components = [];
$scope.$watch('components', function () {
components.push(component);
addressFactory.updateAddress(components);
});
## 在监听地址变化的controller中:
$scope.$on('AddressUpdated', function () {
var street = address.components[0].addressLongName;
var city = address.components[0].cityLongName;
shopFactory.getShops(street, city).then(function (data) {
if(data.status === 200){
$scope.shops = data.shops;
}else{
$log.error('对不起,获取该位置周边商铺数据出错: ', data);
}
});
});
网友评论