如何在 UI-Router 中使用 ui-sref 將參數傳遞給控制器？

在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中文網其他相關文章！