Question

我试图在导航到其子状态时在父状态获取url参数，但在父状态级别，url参数作为空字符串""返回。

这是我的州配置定义：

$stateProvider
  .state("view", {
    url: "/{viewName}",
    controller: function($scope, $stateParams){
      $scope.viewName = $stateParams.viewName;
    },
    template: "<pre>viewName: {{viewName}}</pre> <div ui-view></div>",
  })
  .state("view.A", {
    url: "^/viewA/{id}",
    template: "<div>content of A</div>"
  })
  .state("view.B", {
    url: "^/viewB/{id}",
    template: "<div>content of B</div>"
  });

（完整plunker）

示例网址是：

#/viewA/111
#/viewA/222
#/viewB/555

我想要获得的是父级别的网址（例如"viewA"）中的视图名称。

问：是否可以不使用网址正则表达式？

修改：

需要注意的一个重要要求是能够使用ui-sref或$state.go导航到子状态：

<a ui-sref="view.A({id: 1})">

并相应地更改网址。此要求可防止使用子状态的相对URL进行处理：

.state("view.A", {
    url: "/{id}", // relative URL
    template: "<div>content of A</div>"
  })

Answer 1

要解决上述情况，可以在每个孩子的自定义数据字段中定义viewName：

.state("view.A", {
  url: "/viewA/{id}",
  template: "<div>content of A</div>",
  data: {
    viewName: "viewA"
  }
})
.state("view.B", {
  url: "/viewB/{id}",
  template: "<div>content of B</div>",
  data: {
    viewName: "viewB"
  }
});

并使用$state变量$watch进行$state.$current.data的更改：

.state("view", {
  controller: function($scope, $state){
    $scope.$state = $state; // need to watch $state, not $state.$current
    $scope.$watch("$state.$current.data.viewName", function(val){
      $scope.viewName = val;
    });
  },
  template: "<pre>viewName: {{viewName}}</pre> <div ui-view></div>",
});

请注意，您不能仅仅获取或监视$state.$current.data.viewName，因为父级控制器仅在其后代之间的状态更改时运行一次。

plunker

使用$ stateParams是否有意义？

未定义父状态的URL参数，可能是因为子状态使用的是绝对URL，因此，不使用父级的URL定义（带有请求的url参数）。

虽然，在上面描述的例子中，似乎这是一个功能的遗漏，但我想的更多，这个功能甚至没有完全有意义。如果父母的URL与孩子完全不同，该怎么办：

.state("parent", {url: "/parent/{something}"})
.state("child",  {url: "^/child"})

$stateParams.something应该等于什么？

ui.router：导航到其子节点时，为什么url参数为空状态为空

1 个答案: