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的子状态。所以我们需要为它创建一个锚点/目标。检查plunker here

另外，我使用了这个：

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

UI-Router嵌套视图无法正常工作

1 个答案: