有时候我们需要把一个页面的参数传到另一个页面,供另一个页面使用。
下面讲个例子:有两个页面:page1.html和page2.html,点击page1.html跳转到page2.html,并将page1.html的参数传到page2.html。
1.定义路由信息,并在接收的页面(即page2.html)定义接收参数。
$stateProvider .state('page1', { url: '/page1', templateUrl: 'templates/page1.html', controller: 'pageOneCtrl' }) .state('page2', { url: '/page2', templateUrl: 'templates/page2.html', controller: 'pageTwoCtrl', params:{'ID':{}} })
2.page1页面的点击事件。
<div ng-click="toPage2(123)">点我调用函数传参</div>
controller代码:(page1通过$state传参)
.controller('pageOneCtrl', function ($scope, $state) { $scope.toPage2 = function (id) { $state.go('page2', {ID:id}); }; });
3.在Page2中通过$staeParams获得参数ID。
.controller('pageTwoCtrl’, function ($scope, $stateParams) { var receivedId = $stateParams.ID; console.log(receivedId); //打印的结果即为123 });
如果需要传递多个参数。
1.定义路由信息,并在接收的页面(即page2.html)定义接收参数。
$stateProvider .state('page1', { url: '/page1', templateUrl: 'templates/page1.html', controller: 'pageOneCtrl' }) .state('page2', { url: '/page2', templateUrl: 'templates/page2.html', controller: 'pageTwoCtrl', params:{'args':{}}
})
2.page1页面的点击事件。
<div ng-click="toPage2(123,abc)">点我调用函数传参</div>
controller代码:(page1通过$state传参)
.controller('pageOneCtrl', function ($scope, $state) { $scope.toPage2 = function (id,num) { $state.go('page2', {args:{ID:id,NUM:num}}); }; });
3.在Page2中通过$staeParams获得参数。
.controller('pageTwoCtrl’, function ($scope, $stateParams) { var receivedId = $stateParams.args.ID; var receivedNumber = $stateParams.args.NUM; console.log(receivedId);//打印的结果即为123 console.log(receivedNumber)//打印的结果即为abc });
相关推荐
UI-Router被认为是AngularUI为开发者提供的最实用的一个模块,它是一个让开发者能够根据URL状态或者说是'机器状态'来组织和控制界面UI的渲染,而不是仅仅只改变路由(传统AngularJS应用实用的方式)。该模块为开发者...
前端项目-angular-ui-router,基于状态的AngularJS路由
正在学习Angularjs和路由的Angularjs和ui-router的一个栗子(新手)
angularjs+require+angular-ui-router环境搭建
总结 angular.js路由,angular.js ui-router 用法示例demo,适合初学者使用,简单易懂,无多余代码
ui-router-redirectTo Angular UI-Router的简单状态重定向要求角> = 1.0.8 UI路由器> = 0.2.0用法示例简单的将模块添加为依赖项: angular . module ( 'yourApp' , [ 'ui.router' , 'ui.router.redirectTo' ] ) ; ...
State-based routing for AngularJS 1.x; version v1.0.15
学习angular ui-router - 管理状态,有需要的朋友可以参考下。
Angular的第三方路由
bower instal angular-ui-router-css --save如何使用它将angular-ui-router-css.js到您的页面中。 < script src= " angular-ui-router-css.js " >[removed] 将ui.router.css添加到主模块的依赖项列表中(需要...
angular-ui-router的使用方法有很多,此文中,我们直接在控制器中使用,并完成一个简单的路由。 文中 Angular.js 的版本为 1.5.2 下载和安装 直接通过 bower 来安装 angular-ui-router 使用 bower 安装 angular-...
mobile-angular-ui-1.3.3,那个 mobile-angular-ui中文版 无法下载
前端项目-angular-ui-router.statehelper,Angularui路由器的助手模块,允许您将状态定义为对象树。
$ ngx install angular-ui-router-component 在同一个应用程序中安装多个 angular-ui-router-component 实例: $ ngx install angular-ui-router-component homepage $ ngx install angular-ui-router-component ...
本解决方案下的ui.router项目是针对angularjs ui.router嵌套路由做的一个demo,程序代码采用VS2013开发,代码齐全,可直接运行。有需要的带走吧~v~v~
前端项目-angular-ui-router-title,用于根据当前UI路由器状态更新浏览器标题/历史记录的AngularJS模块。
前端项目-angular-ui-router-default,AngularJS模块,用于在使用UI路由器时为抽象状态指定默认子视图。
redux-ui-router Angular UI Router的ngRedux绑定-将路由器状态保留在ngRedux存储中。 维护商店内的路由器状态使用操作来转换您的UI而不是$state 使用商店状态访问路由参数,而不是$stateParams入门安装$ npm ...
$ npm i -S angular-gsapify-router 用法 首先在您的页面或内部版本中包含 (GSAP的一部分) 在您的主应用程序文件中,例如app.js : // Setup dependencies angular . module ( 'myApp' , [ 'ui-router' , 'hj....