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 UI 应用不同Theme的办法
Sep 12 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
javascript冒泡排序小结
Apr 10 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 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安装全攻略:APACHE
2006/10/09 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
js实现车辆管理系统
2020/08/26 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python网络编程实例简析
2014/09/26 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
营业员演讲稿
2013/12/30 职场文书
超市总经理岗位职责
2014/02/02 职场文书
入党介绍人考察意见
2015/06/01 职场文书
让子弹飞观后感
2015/06/11 职场文书
国富论读书笔记
2015/06/26 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书