`
刘朝雪
  • 浏览: 83861 次
  • 来自: 河北
社区版块
存档分类
最新评论

angular ui-router页面之间传递参数

 
阅读更多

有时候我们需要把一个页面的参数传到另一个页面,供另一个页面使用。

下面讲个例子:有两个页面: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
});

 

 

分享到:
评论

相关推荐

    前端项目-angular-ui-router.zip

    动态参数**:UI-Router允许在状态URL中定义动态参数,这使得可以通过URL传递数据。例如,定义一个显示用户详情的状态: ```javascript .state('user', { url: '/users/:userId', templateUrl: 'views/user.html'...

    Angularjs和ui-router的一个栗子

    var app = angular.module('myApp', ['ui.router']); ``` 接着,你需要配置UI-Router的状态。状态可以通过`.state()`方法定义,其中包含`name`、`url`、`templateUrl`和`controller`等属性。 ```javascript app....

    angular.js ui-router 用法示例demo

    3. **参数(Parameters)**:状态可以带有参数,这些参数可以在URL中传递,用于传递数据。 4. **转场(Transitions)**:转场是状态之间切换的过程,UI-Router提供了钩子函数,可以在转场开始、成功、失败等不同...

    angular-ui-router.zip

    Angular UI Router是AngularJS框架的一个强大路由模块,它为Angular应用程序提供了更灵活和强大的状态管理机制,使得在构建单页面应用(SPA)时能够更好地组织和管理页面间的导航。相比Angular内置的$router服务,UI...

    angularjs+require+angular-ui-router

    在本文中,我们将深入探讨如何使用AngularJS、RequireJS和Angular-UI-Router构建一个高效且模块化的前端应用。AngularJS是一种流行的JavaScript框架,用于构建动态网页应用;RequireJS是AMD(Asynchronous Module ...

    angularjs ui.router嵌套路由demo

    UI.Router的另一个重要特性是它允许在状态之间传递参数。这可以通过在URL中添加动态段(如`:id`)或者通过`params`对象来实现。在`app.js`中,你可以找到如何定义和获取这些参数的例子。 此外,UI.Router还支持抽象...

    ui-router使用教程

    UI-Router 是 AngularJS 框架中的一个强大的路由插件,它提供了更灵活的导航和视图管理机制,能够实现类似 frameset 的效果,即在不重新加载整个页面的情况下,进行页面内部的局部跳转。在深入探讨 UI-Router 的用法...

    angular-ui-route-v1.0.0-rc.1

    UI-Router支持在状态之间传递参数,这些参数可以是URL的一部分,也可以是隐式的。例如: ```javascript .state('user', { url: '/users/:userId', templateUrl: 'user-profile.html', controller: function($...

    angular-ui-router-examples:学习使用ui-router。 代码基于FunnyAnt 的博客文章

    AngularJS UI-Router 是一个强大的路由库,专为AngularJS应用程序设计,用于处理单页应用(SPA)中的页面导航和状态管理。它扩展了AngularJS的内置路由功能,提供了更灵活和可配置的路由机制。在本文中,我们将深入...

    AngularJS ui-router刷新子页面路由的方法

    在使用ui-router构建单页面应用(SPA)时,经常需要刷新特定的路由或子路由,以更新视图、模型或控制器。在AngularJS应用中,刷新子页面路由是一个常见的需求,尤其是在数据变更或用户交互后需要更新页面内容时。...

    Angular.js中angular-ui-router的简单实践

    Angular.js中angular-ui-router是AngularJS的路由管理器,负责管理应用中不同视图的切换和状态的管理。 首先,要使用angular-ui-router需要在控制器中注入依赖。在Angular.js应用中,我们需要定义一个模块并配置...

    AngularJS路由Ui-router模块用法示例

    var app = angular.module('myApp', ['ui.router']); ``` 3. **配置状态(states)** `UI-Router`使用`$stateProvider`来定义和管理状态。每个状态都有自己的URL、模板和控制器。配置状态的方式如下: ```...

    Angular路由ui-router配置详解

    需要注意的是,`ui-router`的引入必须在AngularJS主文件之后,确保Angular环境已经初始化。例如: ```html &lt;script src="angular.main.js"&gt; &lt;script src="angular-ui-router.js"&gt; ``` **配置ui-router** 在...

    angular-ui-router-demo:角度用户界面演示

    4. **参数传递**:UI-Router 支持在状态间传递参数,这些参数可以在URL中作为动态段,也可以作为隐含参数。动态参数通过 `:` 标识,例如 `url: '/user/:userId'`,这样 `userId` 就可以从URL中获取。 5. **重定向与...

    angular-uirouter-seed:使用 angular ui-router 的小种子

    Angular UI Router 是一个用于 AngularJS 应用程序的强大的路由库,它扩展了 AngularJS 的原生 $route 服务,提供了更加灵活和功能丰富的状态管理。`angular-uirouter-seed` 是一个基础项目,旨在帮助开发者快速启动...

    scalajs-angulate-uirouter:用于 Angular ui-router 模块的 Scala-js 外观

    除了基本的路由配置,UI-Router 还提供了丰富的功能,如状态的嵌套、参数传递、重定向、 resolve 规则(在进入状态前执行的函数)等。在 Scala.js Angulate UIRouter 中,你可以用同样方式来利用这些特性,只是语法...

    ui-router-test:尝试通过 scotch.io 教程运行 UI-router

    在scotch.io的教程中,你可能会学习到如何创建和导航到这些状态,以及如何利用UI-router的特性,如嵌套状态、参数传递、抽象状态等。例如,通过嵌套状态,你可以创建一个子状态,它会共享父状态的一些属性: ```...

    OnsenUI-router:带有ui-router的OnsenUI示例应用程序

    在"OnsenUI-router:带有ui-router的OnsenUI示例应用程序"中,我们可以深入理解如何在OnsenUI项目中整合和利用ui-router进行页面导航和状态管理。ui-router是AngularJS的一个插件,它提供了比AngularJS内置的ngRoute...

    UI-Router:玩转UI-Router

    UI-Router允许在状态间传递参数。在URL中的参数可以通过`params`配置项指定,也可以在`$transition$`服务中访问和操作。 ```javascript .state('user.detail', { url: '/:userId/details', params: { userId: ...

Global site tag (gtag.js) - Google Analytics