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ù)
首先，要在目標(biāo)頁面定義接受的參數(shù)：
傳參，
ui-sref:
$state.Go:
接收參數(shù)，
在目標(biāo)頁面的controller里注入$stateParams，然后 "$stateParams.參數(shù)名" 獲取
二：傳遞多個參數(shù)其實(shí)也很簡單可以在上面的單個后面直接拼
1：目標(biāo)頁面定義需要傳的傳輸個數(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'
}
}
})
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傳參的三種寫法小結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
angular中每個controller（控制器）都會有自己的$scope，通過為這個對象添加屬性賦值，就可以將數(shù)據(jù)傳遞給模板進(jìn)行渲染，每個$scope只會在自己控制器內(nèi)起作用，而有時候需要用到其他控制器中的數(shù)據(jù)就要考慮到控制器之間參數(shù)的傳遞了，下面來看看詳細(xì)的介紹。2017-04-04
AngularJS 實(shí)現(xiàn)彈性盒子布局的方法
本文給大家?guī)硪欢魏喍檀a實(shí)現(xiàn)angularjs彈性布局效果，非常實(shí)用，對angularjs彈出布局知識感興趣的朋友可以參考下2016-08-08
這幾天升級公司的一個Angular項(xiàng)目遇到了一些問題,下面這篇文章主要給大家介紹了關(guān)于Angular8升級至Angular13遇到的問題解決,文中介紹的非常詳細(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理解及示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了AngularJS實(shí)現(xiàn)全選反選功能，這里用到AngularJS四大特性之二----雙向數(shù)據(jù)綁定，對angularjs實(shí)現(xiàn)全選反選相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
angular+webpack2實(shí)戰(zhàn)例子
本篇文章主要介紹了angular+webpack2實(shí)戰(zhàn)例子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了angular 服務(wù)隨記小結(jié),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Angular 2使用路由自定義彈出組件toast操作,結(jié)合實(shí)例形式分析了Angular2使用路由操作彈出組件toast相關(guān)定義與使用技巧,需要的朋友可以參考下2019-05-05
當(dāng)你在輸入框中鍵入文本時,這個文本會立即反映到?testString?屬性上,反之亦然,如果你在組件類中改變?testString?的值,輸入框的內(nèi)容也會相應(yīng)更新,這篇文章主要介紹了AngularJS?的生命周期和基礎(chǔ)語法,需要的朋友可以參考下2024-05-05