AngularJS路由 $state服务、路由事件、获取路由参数

àì夳堔傛蜴生んèń 2022-06-17 04:43 295阅读 0赞

### 1 ui-sref、$state.go 的区别 ###

ui-sref 一般使用在 …；

<a ui-sref="message-list">消息中心</a>

$state.go(‘someState’)一般使用在 controller里面；

.controller('firstCtrl', function($scope, $state) { 
          $state.go('login');
     });

这两个本质上是一样的东西，我们看ui-sref的源码：

...
    element.bind("click", function(e) {
        var button = e.which || e.button;
        if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
    
          var transition = $timeout(function() {
            // HERE we call $state.go inside of ui-sref
            $state.go(ref.state, params, options);
          });

ui-sref最后调用的还是$state.go()方法

### 2 如何传递参数 ###

首先，要在目标页面定义接受的参数：

![这里写图片描述][SouthEast]

传参，

ui-sref:

![这里写图片描述][SouthEast 1]

$state.go:

![这里写图片描述][SouthEast 2]

接收参数，

在目标页面的controller里注入stateParams，然后"stateParams.参数名” 获取

![这里写图片描述][SouthEast 3]

[SouthEast]: /images/20220617/f502ac3a78e7404285186608d4ff3a32.png
[SouthEast 1]: /images/20220617/77c598e9bc244ee29a74943d0a2b7407.png
[SouthEast 2]: /images/20220617/b3ec35e633c2499a89123d53669f7a53.png
[SouthEast 3]: /images/20220617/c64ed2d9783646829c2bac1f97083c42.png

发表评论取消回复

表情：

评论列表（有 0 条评论，295人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 446 阅读

相关 AngularJs路由机制

概述最近项目要用到Angularjs路由机制，所以打算学一学，了解一下路由机制。在谈路由机制前有必要先提一下现在比较流行的单页面应用，就是所谓的single page

心已赠人/ 2022年08月20日 04:25/ 0 赞/ 285 阅读

相关 AngularJS路由 $state服务、路由事件、获取路由参数

1 ui-sref、$state.go 的区别 ui-sref 一般使用在 …； <a ui-sref="message-list">消息中心</a> $st

àì夳堔傛蜴生んèń/ 2022年06月17日 04:43/ 0 赞/ 296 阅读

相关 AngularJS 配置路由

> 在使用AngularJS的时候需要用到路由来控制页面的跳转，从而达到使用一个面板进行控制的目的，面板页面如图所示 ![控制面板][SouthEast] > 该面板分为菜

谁践踏了优雅/ 2022年06月15日 04:21/ 0 赞/ 280 阅读

相关 angularjs路由

路由的概念：平时我们用的app总是多页面，如果用原生安卓或者苹果，那当然很流畅啦。但是当我们用一般的html页面做移动端，简单时候我们可以用这样的标签去链接页面时，速度还是

布满荆棘的人生/ 2022年06月13日 07:48/ 0 赞/ 313 阅读

相关 angularJS路由

AngularJS 路由本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 Angula

墨蓝/ 2022年06月07日 08:41/ 0 赞/ 291 阅读

相关 AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括： ● UI-Router的$state服务 ● UI-Router的路由事件

Dear 丶/ 2022年03月29日 07:47/ 0 赞/ 249 阅读

相关 AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve...

本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括： ● 刷新路由 ● 查看当前路由以及所有路由 ● 路由触发事件 ● 获取路

男娘i/ 2021年11月02日 12:32/ 0 赞/ 415 阅读

相关 AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括： ● UI-Router的$state服务 ● UI-Router的路由事件 ●

àì夳堔傛蜴生んèń/ 2021年11月02日 12:32/ 0 赞/ 355 阅读

相关 AngularJs 路由

router路由 router路由是angularJs用于构建单页面应用的模块本质是从a标签点击跳转功能延展而来的功能:主

刺骨的言语ヽ痛彻心扉/ 2021年07月24日 20:52/ 0 赞/ 518 阅读