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