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 相关文章推荐
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 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
谈谈PHP的输入输出流
2007/02/14 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
对比分析json及XML
2014/11/28 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
python制作websocket服务器实例分享
2016/11/20 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
会计应聘求职信范文
2013/12/17 职场文书
社区矫正工作方案
2014/06/04 职场文书
篮球比赛策划方案
2014/06/05 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
同学聚会祝酒词
2015/08/10 职场文书
2015年教师节广播稿
2015/08/19 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS