ฉันได้สร้างตัวอย่างเพื่อแสดงวิธีการ state
คำจำกัดความที่อัปเดตจะเป็น:
$stateProvider
.state('home', {
url: '/:foo?bar',
views: {
'': {
templateUrl: 'tpl.home.html',
controller: 'MainRootCtrl'
},
...
}
และนี่จะเป็นตัวควบคุม:
.controller('MainRootCtrl', function($scope, $state, $stateParams) {
//..
var foo = $stateParams.foo; //getting fooVal
var bar = $stateParams.bar; //getting barVal
//..
$scope.state = $state.current
$scope.params = $stateParams;
})
สิ่งที่เราสามารถเห็นได้คือสภาพบ้านในขณะนี้มี URL ที่กำหนดเป็น:
url: '/:foo?bar',
ซึ่งหมายความว่าคาดว่าพารามิเตอร์ใน URL จะเป็น
/fooVal?bar=barValue
ลิงก์ทั้งสองนี้จะส่งผ่านข้อโต้แย้งไปยังคอนโทรลเลอร์อย่างถูกต้อง:
<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">
นอกจากนี้ยังควบคุมไม่กินแทน$stateParams
$stateParam
ลิงก์ไปที่ doc:
คุณสามารถตรวจสอบได้ที่นี่
params : {}
นอกจากนี้ยังมีใหม่ , params : {}
การตั้งค่าความละเอียดมากขึ้น url
ในฐานะที่เราได้เห็นแล้วเราสามารถประกาศพารามิเตอร์เป็นส่วนหนึ่งของ แต่ด้วยparams : {}
การกำหนดค่า - เราสามารถขยายคำจำกัดความนี้หรือแม้กระทั่งแนะนำพารามิเตอร์ที่ไม่ได้เป็นส่วนหนึ่งของ url:
.state('other', {
url: '/other/:foo?bar',
params: {
// here we define default value for foo
// we also set squash to false, to force injecting
// even the default value into url
foo: {
value: 'defaultValue',
squash: false,
},
// this parameter is now array
// we can pass more items, and expect them as []
bar : {
array : true,
},
// this param is not part of url
// it could be passed with $state.go or ui-sref
hiddenParam: 'YES',
},
...
การตั้งค่าที่มีให้สำหรับ params อธิบายไว้ในเอกสารของ$ stateProvider
ด้านล่างเป็นเพียงสารสกัด
- value - {object | function =} : ระบุค่าเริ่มต้นสำหรับพารามิเตอร์นี้ สิ่งนี้ตั้งค่าพารามิเตอร์นี้โดยปริยายเป็นทางเลือก ...
- array - {boolean =}: (ค่าเริ่มต้น: false) หากเป็นจริงค่าพารามิเตอร์จะถือว่าเป็นอาร์เรย์ของค่า
- squash - {bool | string =}:สควอชกำหนดวิธีการแสดงค่าพารามิเตอร์เริ่มต้นใน URL เมื่อค่าพารามิเตอร์ปัจจุบันเหมือนกันกับค่าเริ่มต้น
เราสามารถเรียก params เหล่านี้ด้วยวิธีนี้:
// hidden param cannot be passed via url
<a href="#/other/fooVal?bar=1&bar=2">
// default foo is skipped
<a ui-sref="other({bar: [4,5]})">
ตรวจสอบการทำงานที่นี่
url:'.../home/:foo/:bar