javascript - Angular ui 路由器嵌套的 ui-views 不工作

Question

我正在尝试在 Angular 内创建一个简单的嵌套路由，并且每当出现嵌套路由时， View 都不会弹出

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

为什么嵌套的 ui View 不选取 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 用户界面路由器

// 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，on另一方面使用隐式 View 定义，可以这样表达:

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

查一下here