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

 更新时间:2018年08月31日 15:05:57   作者:mountain_tea  
今天小编就为大家分享一篇angular1.x ui-route传参的三种写法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

.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;
}

一: 如何传递单个参数

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

传参,

ui-sref:

$state.Go:

接收参数,

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

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

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

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

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

三:传递对象

$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传参的三种写法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • angular实现input输入监听的示例

    angular实现input输入监听的示例

    今天小编就为大家分享一篇angular实现input输入监听的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • angularJS开发注意事项

    angularJS开发注意事项

    本篇文章给大家分享了angularJS开发注意事项以及相关知识点,对此有兴趣的朋友参考学习下。
    2018-05-05
  • Angular实现搜索框及价格上下限功能

    Angular实现搜索框及价格上下限功能

    这篇文章主要为大家详细介绍了Angular实现搜索框及价格上下限功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • 详解AngularJS中自定义过滤器

    详解AngularJS中自定义过滤器

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等
    2015-12-12
  • 深入浅析AngularJs模版与v-bind

    深入浅析AngularJs模版与v-bind

    v-bind与{{}}都可以对数据进行绑定,接下来通过本文给大家介绍AngularJs模版与v-bind的相关知识,感兴趣的朋友一起看看吧
    2018-07-07
  • Angular 作用域scope的具体使用

    Angular 作用域scope的具体使用

    本篇文章主要介绍了Angular 作用域的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • AngularJS使用ng-Cloak阻止初始化闪烁问题的方法

    AngularJS使用ng-Cloak阻止初始化闪烁问题的方法

    这篇文章主要介绍了AngularJS使用ng-Cloak阻止初始化闪烁问题的方法,结合实例形式分析了AngularJS使用ng-Cloak来解决初始化时出现闪烁问题的相关技巧,需要的朋友可以参考下
    2016-11-11
  • Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

    Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

    下面小编就为大家带来一篇Angularjs中的事件广播 —全面解析$broadcast,$emit,$on。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • Angular中使用ng-zorro图标库部分图标不能正常显示问题

    Angular中使用ng-zorro图标库部分图标不能正常显示问题

    这篇文章主要介绍了Angular中使用ng-zorro图标库部分图标不能正常显示问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 初学者AngularJS的环境搭建过程

    初学者AngularJS的环境搭建过程

    这篇文章主要介绍了初学者AngularJS的环境搭建过程,在文章给大家提到了Angular-cli的特性,大家一起看看吧
    2017-10-10

最新评论