UI-Router 嵌套视图不起作用

Question

我正在尝试使用角面包屑创建嵌套视图...这里的问题是状态 app.input1.input2 其自己的模板 input2 未加载。 . 它只是连续加载 app.input1...

如果我尝试在 app.input1.input2 中提供错误的 templateUrl，那么它会返回错误，但是当我提供正确的路径时，它不会加载相同的模板和任何错误 .. 它只是加载相同的模板app.input1

建议我知道为什么该模板没有加载？

#app.js

$stateProvider
    .state('app', {
        abstract: true,
        url: '/app',
        templateUrl: 'view/abc.html',
        data: {
        breadcrumbProxy: 'app.start'
        }
    })

    .state('app.start', {
        url: '/start',
        templateUrl: 'view/start.html',
        data: {
            displayName: 'start',
          }
    })        

    .state('app.input1', {
        url: '/input1',
        templateUrl: 'view/input1.html',
          data: {
            displayName: 'input1',
          }
    })

    .state('app.input1.input2', {
        url: '/input2',    
        templateUrl: 'view/input2',
          data: {
            displayName: 'input2',
          }
    });
$urlRouterProvider.otherwise('app.start');

index.html

<div ui-view></div>

abc.html

<div ui-view></div>

start.html

<div>
    <a ui-sref="app.input1">Input1</a>
</div>

input1.html

<div>
    <a ui-sref="app.input1.input2">Input2</a>
</div>

input2.html

<div>bla bla bla bla</div>

Answer 1

这里是a working plunker。所做的更改在这里：

input1.html

<div>
    <a ui-sref="app.input1.input2">Input2</a>
    <div ui-view></div> // anchor for child
</div>

input2 是input1 的子状态。所以我们需要为它创建一个锚/目标。检查插件here

另外，我用了这个：

$urlRouterProvider.otherwise('/app/start');