Question

我试图在同一配置文件中创建2个单独的URL状态。

我正在按照以下模板进行操作。

＆＃13;

$stateProvider.state('parent', {
      data:{
         customData1:  "Hello",
         customData2:  "World!"
      }
   })
   .state('parent.child', {
      data:{
         // customData1 inherited from 'parent'
         // but we'll overwrite customData2
         customData2:  "UI-Router!"
      }
   });

＆＃13;

我的代码如下。 / reports / moveFrom工作正常;但是，/ drillDown路由甚至没有注册。点击该网址会将我发回我的应用主页。

我想知道parent.child符号是否被app.report_moveFrom.drillDown搞砸了，因为它有2x（。）

非常感谢任何帮助。

＆＃13;

  $stateProvider
    .state('app.report_moveFrom', {
      url: '/reports/moveFrom',
      views:{
        'main': {
          template: require('./moveFrom.html'),
          controller: 'moveFromController as $ctrl'
        }
      },
      title: 'moveFrom'
    })
    .state('app.report_moveFrom.drillDown', {
      url: '/drillDown',
      views:{
        'main': {
          template: require('./drillDown.html'),
          controller: 'moveFromController as $ctrl'
        }
      },
      title: 'drillDown'
    })

＆＃13;

Answer 1

您能否添加用于拨打电话的代码？你应该这样打电话：

/reports/moveFrom/drillDown

如果您不这样做，请更改一次并检查

这是来自lib的文章：

$ stateProvider .state（＆＃39; contacts＆＃39;，{ 摘要：是的， url：＆＃39; / contacts＆＃39;，

    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ui-view/>'
})
.state('contacts.list', {
    // url will become '/contacts/list'
    url: '/list'
    //...more
})
.state('contacts.detail', {
    // url will become '/contacts/detail'
    url: '/detail',
    //...more
})

Answer 2

重点是：州名中的每个. （点）表示嵌套。即

// child of the 'app' state
.state('app.report_moveFrom', {
// child of the above 'app.report_moveFrom'
.state('app.report_moveFrom.drillDown', {

此外，任何视图定位都默认使用相对命名。这意味着，UI-Router在父状态下搜索（un）named 视图。因此，'app.report_moveFrom'必须包含 app.report_moveFrom ，如果我们使用此语法：

// parent for next state
.state('app.report_moveFrom', {
...
// the default view name resolution is related to parent
.state('app.report_moveFrom.drillDown', {
  url: '/drillDown',
  views:{
     // that ui-view="main" target must be in the above state
    'main': {
    ...

最后，如果我们有一个孩子，它还会继承父 url

// parent url
.state('app.report_moveFrom', {
  url: '/reports/moveFrom',
  ...
})
//child url - is later extended with parent part
.state('app.report_moveFrom.drillDown', {
  url: '/drillDown',
  ...
  // and in runtime this state has '/reports/moveFrom' +  '/drillDown'
  // i.e.: '/reports/moveFrom/drillDown'

但我们可以通过一些技巧来改变这种默认行为。

1）重置网址，从root开始，2）以绝对视图命名的目标祖父母

.state('app.report_moveFrom.drillDown', {
  // this sign at the beginning will rest url evaluation - to root level
  url: '^/drillDown',
  views:{
    // we use absolute naming here, so this state will be placed into grand parent 'app'
    'main@app': {
      ...

但最好的是（在我看来）只需从州名中删除'.'，默认情况下创建兄弟 （不是孩子）

.state('app.report_moveFrom', {
// remove dot
//.state('app.report_moveFrom.drillDown', {
.state('app.report_moveFrom_drillDown', {

...现在所有人都会按设计工作 - 因为我们没有创建了太多嵌套状态

Angular UI-Router中的嵌套状态问题

2 个答案: