快捷導(dǎo)航

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

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

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

如下所示：

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

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

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

傳參，

ui-sref:

$state.Go:

接收參數(shù)，

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

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

1：目標(biāo)頁(yè)面定義需要傳的傳輸個(gè)數(shù)

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

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

三：傳遞對(duì)象

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

您可能感興趣的文章:

相關(guān)文章

Angular.js中控制器之間的傳值詳解
angular中每個(gè)controller（控制器）都會(huì)有自己的$scope，通過(guò)為這個(gè)對(duì)象添加屬性賦值，就可以將數(shù)據(jù)傳遞給模板進(jìn)行渲染，每個(gè)$scope只會(huì)在自己控制器內(nèi)起作用，而有時(shí)候需要用到其他控制器中的數(shù)據(jù)就要考慮到控制器之間參數(shù)的傳遞了，下面來(lái)看看詳細(xì)的介紹。
2017-04-04
AngularJS 實(shí)現(xiàn)彈性盒子布局的方法
本文給大家?guī)?lái)一段簡(jiǎn)短代碼實(shí)現(xiàn)angularjs彈性布局效果，非常實(shí)用，對(duì)angularjs彈出布局知識(shí)感興趣的朋友可以參考下
2016-08-08
Angular8升級(jí)至Angular13遇到的問(wèn)題解決
這幾天升級(jí)公司的一個(gè)Angular項(xiàng)目遇到了一些問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Angular8升級(jí)至Angular13遇到的問(wèn)題解決,文中介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
AngularJS中$apply方法和$watch方法用法總結(jié)
這篇文章主要介紹了AngularJS中$apply方法和$watch方法用法,結(jié)合實(shí)例形式總結(jié)分析了$apply方法和$watch方法的功能、參數(shù)含義、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
angular2 ng2 @input和@output理解及示例
本篇文章主要介紹了angular2 ng2 @input和@output理解及示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
AngularJS實(shí)現(xiàn)全選反選功能
這篇文章主要介紹了AngularJS實(shí)現(xiàn)全選反選功能，這里用到AngularJS四大特性之二----雙向數(shù)據(jù)綁定，對(duì)angularjs實(shí)現(xiàn)全選反選相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
angular+webpack2實(shí)戰(zhàn)例子
本篇文章主要介紹了angular+webpack2實(shí)戰(zhàn)例子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
angular 服務(wù)隨記小結(jié)
這篇文章主要介紹了angular 服務(wù)隨記小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Angular 2使用路由自定義彈出組件toast操作示例
這篇文章主要介紹了Angular 2使用路由自定義彈出組件toast操作,結(jié)合實(shí)例形式分析了Angular2使用路由操作彈出組件toast相關(guān)定義與使用技巧,需要的朋友可以參考下
2019-05-05
AngularJS?的生命周期和基礎(chǔ)語(yǔ)法使用詳解
當(dāng)你在輸入框中鍵入文本時(shí),這個(gè)文本會(huì)立即反映到?testString?屬性上,反之亦然,如果你在組件類(lèi)中改變?testString?的值,輸入框的內(nèi)容也會(huì)相應(yīng)更新,這篇文章主要介紹了AngularJS?的生命周期和基礎(chǔ)語(yǔ)法,需要的朋友可以參考下
2024-05-05