Angular ui路由器嵌套的ui-views无法正常工作

Question

我尝试在角度内创建一个简单的嵌套路线，每当出现嵌套路线时，视图都不会弹出

路径http://localhost:9000/#/home/hello我仍然只能看到homeHello

为什么嵌套的ui视图没有拿起home.hello模板？

呈现HTML

<section ui-view="" class="ng-scope">
  <section class="home ng-scope">
    home
    <a ui-sref=".hello" href="#/home/hello">Hello</a>
    <!-- uiView: ui-view -->
    <div ui-view="ui-view" class="ng-scope"></div>
  </section>
</section>

Angular Ui路由器

// app.js

angular.module('spoonFeeder',
  ['ui.router',
   'ngAnimate',
   'ngCookies',
   'ngResource',
   'ngSanitize',
   'ngTouch'])

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $urlRouterProvider.otherwise('/home')

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home/home.html'
        })
        .state('home.hello', {
            url: '/hello',
            templateUrl: 'home/hello.html'
        })

        // use the HTML5 History API
        // $locationProvider.html5Mode(true);
});

浏览

<!-- home/home`.html -->
<section class="home">home<a ui-sref=".hello">Hello</a>
  <div ui-view="ui-view"></div>
</section>

<!-- home/hello.html -->
<section class="hello">Hello</section>

Answer 1

有一个plunker有一个工作示例。我改变的是：“扩展父模板”

<section class="home">home
  <a ui-sref=".hello">Hello</a>
  <div ui-view="ui-view"></div>
  <div ui-view=""></div>      <!-- new line -->
</section>

新元素div确实也包含属性ui-view，但在这种情况下，它是未命名的，因此此状态定义可以找到它：

.state('home.hello', {
  url: '/hello',
  templateUrl: 'tpl.hello.html',
})

要显示，我们如何定位第一个ui-view="ui-view"，实际上是命名的，有新状态Hello2：

.state('home.hello2', {
  url: '/hello2',
  views : {
    'ui-view' : {
      templateUrl: 'tpl.hello2.html',
    }
  }
})

此状态现在实际上是以ui-view="ui-view为目标，因为它使用明确的views {}定义。另一方面，状态hello使用隐式视图定义，可以这样表达：

  views : {
    '' : { // targeting unnamed ui-view=""
      templateUrl: 'tpl.hello2.html',
    }
  }

检查here