angular1.x ui-route传参的三种写法小结


Posted in Javascript onAugust 31, 2018

如下所示:

.state('classrooms',{
 url: '/classrooms/:id'
})
.state('classrooms',{
 url: '/classrooms/{id}'
})
.state('activities',{
 url: '/activities',
 params: {
 id: { value: 42}
 }
})

localhost:3000/#/classrooms/3

function ClassroomController($stateParams){
 var classroomID = $stateParams.id;
}

一: 如何传递单个参数

首先,要在目标页面定义接受的参数:

angular1.x ui-route传参的三种写法小结

传参,

ui-sref:

angular1.x ui-route传参的三种写法小结

$state.Go:

angular1.x ui-route传参的三种写法小结

接收参数,

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

angular1.x ui-route传参的三种写法小结

二:传递多个参数其实也很简单可以在上面的单个后面直接拼

1:目标页面定义需要传的传输个数

angular1.x ui-route传参的三种写法小结

2:controll里面接受(注入$stateParams,然后 "$stateParams.参数名)

angular1.x ui-route传参的三种写法小结

我这里是用页面绑定的值作为参数传过去,大家可以传固定的,具体业务具体对待

三:传递对象

$stateProvider
 .state('app.example1', {
  url: '/example',
  views: {
   'menuContent': {
   templateUrl: 'templates/example.html',
   controller: 'ExampleCtrl'
   }
  }
  })
  .state('app.example2', {
  url: '/example2/:object',
  views: {
   'menuContent': {
   templateUrl: 'templates/example2.html',
   controller: 'Example2Ctrl'
   }
  }
  })

2)

.controller('ExampleCtrl', function ($state, $scope, UserService) {
 
 
 $scope.goExample2 = function (obj) {
 
  $state.go("app.example2", {object: JSON.stringify(obj)});
 }
 
 })
 .controller('Example2Ctrl', function ($state, $scope, $stateParams) {
 
 console.log(JSON.parse($state.params.object));
 
 
 })

以上这篇angular1.x ui-route传参的三种写法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
原生js canvas实现鼠标跟随效果
Aug 02 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 #Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 #Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 #Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 #Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 #Javascript
Bootstrap模态对话框用法简单示例
Aug 31 #Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 #Javascript
You might like
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
PHP原理之异常机制深入分析
2010/08/08 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
如何使用angularJs
2017/05/08 Javascript
解析vue中的$mount
2017/12/21 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
详解Python命令行解析工具Argparse
2016/04/20 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
夜大毕业自我鉴定
2013/10/11 职场文书
护士见习期自我鉴定
2014/02/08 职场文书
品德评语大全
2014/05/05 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
个人催款函范文
2015/06/23 职场文书
关于幸福的感言
2015/08/03 职场文书