angular1.x ui-route傳參的三種寫法小結(jié)

更新時間：2018年08月31日 15:05:57 作者：mountain_tea

今天小編就為大家分享一篇angular1.x ui-route傳參的三種寫法小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

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

一：如何傳遞單個參數(shù)

首先，要在目標頁面定義接受的參數(shù)：

傳參，

ui-sref:

$state.Go:

接收參數(shù)，

在目標頁面的controller里注入$stateParams，然后 "$stateParams.參數(shù)名" 獲取

二：傳遞多個參數(shù)其實也很簡單可以在上面的單個后面直接拼

1：目標頁面定義需要傳的傳輸個數(shù)

2：controll里面接受（注入$stateParams，然后 "$stateParams.參數(shù)名）

我這里是用頁面綁定的值作為參數(shù)傳過去，大家可以傳固定的，具體業(yè)務(wù)具體對待

三：傳遞對象

$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'
   }
  }
  })

.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傳參的三種寫法小結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS 過濾器（自帶和自建）詳解
這篇文章主要介紹了AngularJS 過濾器（自帶和自建）詳解的相關(guān)資料,需要的朋友可以參考下
2016-09-09
詳解AngularJS 路由 resolve用法
本篇文章主要介紹了AngularJS 路由 resolve用法，詳細的介紹了resolve用法，想要了解resolve用法的朋友可以了解一下
2017-04-04
AngularJS入門（用ng-repeat指令實現(xiàn)循環(huán)輸出
這篇文章主要介紹了AngularJS入門（用ng-repeat指令實現(xiàn)循環(huán)輸出,需要的朋友可以參考下
2016-05-05
Angular CLI發(fā)布路徑的配置項淺析
這篇文章主要給大家介紹了關(guān)于Angular CLI發(fā)布路徑的配置項的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-03-03
Angular ng-class詳解及實例代碼
這篇文章主要介紹了Angular ng-class的知識，并整理了相關(guān)資料，有興趣的小伙伴可以參考下
2016-09-09
angularJS提交表單（form）
這篇文章主要介紹了angularJS提交表單（form）的方法和示例,需要的朋友可以參考下
2015-02-02
Angular瀏覽器插件Batarang介紹及使用
本篇文章主要介紹了Angular瀏覽器插件Batarang介紹及使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
Angular2學習教程之TemplateRef和ViewContainerRef詳解
這篇文章主要給大家介紹了Angular2中TemplateRef和ViewContainerRef的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-05-05
詳解angular中如何監(jiān)控dom渲染完畢
AngularJs是Google開源的前端JS框架。使用AngularJs, 我們能夠容易地、健壯的開發(fā)出類似于Gmail一樣的單頁Web應用。這篇文章主要介紹了詳解angular中如何監(jiān)控dom渲染完畢，有興趣的可以了解一下。
2017-01-01
AngularJS的內(nèi)置過濾器詳解
在我們開發(fā)中經(jīng)常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能，angularjs內(nèi)部為我們提供了number等很多內(nèi)置的filter。
2015-05-05