在UI-Router 中使用ui-sref 將參數傳遞給控制器
在UI-Router 中，透過ui- sref 將參數傳遞給控制器是國家之間共享資料的關鍵要素。以下是有效完成此任務的方法：
首先，使用冒號語法定義目標狀態的URL 以包含參數佔位符，如下面所示的更新後的狀態定義所示：
$stateProvider
.state('home', {
url: '/:foo?bar',
...在此範例中，「home」狀態需要URL 路徑中的參數「foo」和「bar」。
接下來，調整控制器以正確接收這些參數：
.controller('MainRootCtrl', function($scope, $state, $stateParams) {
// ...
var foo = $stateParams.foo; // Accessing 'fooVal'
var bar = $stateParams.bar; // Accessing 'barVal'
// ...在這個控制器中，我們注入$stateParams而不是$stateParam，這樣我們就可以存取傳遞的參數。
此外，UI-Router也透過state內的'params'物件提供細微的參數配置定義。此選項可讓您指定預設值、施加類型約束等。
例如，考慮此擴展參數配置：
.state('other', {
url: '/other/:foo?bar',
params: {
foo: {
value: 'defaultValue',
squash: false,
},
bar: {
array: true, // Treat bar as an array
},
hiddenParam: 'YES', // Not present in the URL
},
...此配置顯示了我們如何定義預設值參數並控制它們在 URL 中的行為。
最後，請記住在使用'ui-sref' 屬性或'$state.go()' 方法導航到所需狀態時傳遞參數：
<a ui-sref="other({foo: 'fooVal1', bar: 'barVal1'})">...</a>
$state.go('home', {foo: 'fooVal2', bar: 'barVal2'});透過實現這種方法，您可以使用UI-Router 中的ui-sref 有效地將參數傳遞給控制器，確保AngularJS 應用程式內的無縫狀態轉換和資料共享。
以上是如何在 UI-Router 中使用 ui-sref 將參數傳遞給控制器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
