如何使用 ui-sref 传递参数并在控制器中检索它们？

使用 ui-sref 传递参数并在控制器中检索

问题

您需要使用 ui-sref 和将两个参数传递给状态在状态控制器中访问它们。但是，您在控制器中遇到未定义参数值的问题。

解决方案

要使用 ui-sref 传递参数并在控制器中检索它们，请按照以下步骤操作：

1. 更新状态定义：

$stateProvider
    .state('home', {
      url: '/:foo?bar', // Define parameter placeholders in the URL
      views: {
        '': {
          templateUrl: 'home.html',
          controller: 'MainRootCtrl'
        },
        ...
      }
    });

2. 在控制器中使用 $stateParams：

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

粒度参数配置

除了 URL 参数占位符之外，您还可以使用状态定义中的 params 对象来定义粒度参数：

.state('other', {
    url: '/other/:foo?bar',
    params: {
        foo: {
          value: 'defaultValue',
          squash: false,
        },
        bar: {
          array: true,
        },
        hiddenParam: 'YES',
      }
    ...

用法示例

要使用 ui-sref 传递参数并使用更新的状态定义检索它们：

<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})"></a>
<a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})"></a>

参数配置选项

params 对象设置包括：

• value: 指定默认参数值。
• array: 将参数视为数组。
• squash: 配置方式默认参数值在 URL 中表示。

有关详细信息，请参阅有关 URL 参数和 $stateProvider 的 ui-router 文档。

以上是如何使用 ui-sref 传递参数并在控制器中检索它们？的详细内容。更多信息请关注PHP中文网其他相关文章！