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

在ui-router 中使用ui-sref 將參數傳遞給控制器

在ui-router 中，使用ui- sref 轉換到某個狀態允許將參數傳遞給控制器。澄清一下，您可以向目標狀態發送和接收兩個參數“foo”和“bar”。

狀態定義

更新狀態定義以接受URL 中的參數：

  $stateProvider
    .state('home', {
      url: '/:foo?bar',
      views: {
        '': {
          templateUrl: 'tpl.home.html',
          controller: 'MainRootCtrl'
        }
      }
    });

Controller消耗

在控制器內，從$stateParams檢索參數：

  .controller('MainRootCtrl', function($scope, $state, $stateParams) {
    //..
    var foo = $stateParams.foo; //getting fooVal
    var bar = $stateParams.bar; //getting barVal
    //..
  })

連結產生

要傳遞參數，請使用這個語法：

<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">

這將轉換到「home 」狀態指定的foo 和bar 參數，然後可以透過$stateParams 在控制器中存取這些參數。

自訂參數（可選）

狀態中帶有「params」屬性定義，您可以進一步設定參數行為：

  $stateProvider
    .state('other', {
      url: '/other/:foo?bar',
      params: {
        foo: {
          value: 'defaultValue',
          squash: false,
        },
        bar: {
          array: true,
        },
        hiddenParam: 'YES',
        // (not in URL)
      }
    });

參數設定include:

• 值：預設值
• 陣列：將參數值視為陣列
• squash：控制URL中的預設值表示

參數注入

控制器參數注入是透過$stateParams。您可以使用以下方式檢索值：

var paramValue = $stateParams.paramName;

這就是 UI-router 如何使用 ui-sref 啟用狀態之間的參數傳遞，以便在控制器中輕鬆進行狀態轉換和參數可存取。

以上是如何在 ui-router 中使用 ui-sref 將參數傳遞給控制器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！