嵌套状态不使用Angular UI路由器

Question

我是第一次尝试使用lib，看起来嵌套状态没有按预期工作。

州：

1. home州显示3个 ui-views 内容（上，左和内容）
2. home.splash州必须显示相同的 ui-views 和新的（模态）。希望继承的 ui-views 不应该更新DOM，因为它们已经加载了......

现在，我看到网址发生了变化，这是我的控制台：

这是jsfiddle链接： http://jsfiddle.net/ffv0e2v7/3/

以下是代码：

'use strict';

angular.module('myApp', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/home');

        $stateProvider
          .state('home', {
            url: '/home',
            views: {
              top     : { templateUrl: 'views/ui/top.html' },
              left    : { templateUrl: 'views/ui/left.html' },
              content : { templateUrl: 'views/ui/content.html' }
            }
          })
          .state('home.splash', {
            url    : '/splash',
            views: {
              /*top     : { templateUrl: 'views/ui/top.html' },
              left    : { templateUrl: 'views/ui/left.html' },
              content : { templateUrl: 'views/ui/content.html' },*/

              modal   : { templateUrl: 'views/modals/splash.html' }
            }
          });

    }]);

    <div ng-app="myApp">
        <!-- Views -->
        <div ui-view="top"></div>
        <div ui-view="left"></div>
        <div ui-view="content"></div>
        <div ui-view="modal"></div>

        <!-- Links -->
        <a ui-sref="home.splash">Splash</a>
        <a ui-sref="home">Home</a>

        <!-- Templates -->
        <script type="text/ng-template" id="views/ui/top.html">
          <div>top.html</div>
        </script>
        <script type="text/ng-template" id="views/ui/left.html">
          <div>left.html</div>
        </script>
        <script type="text/ng-template" id="views/ui/content.html">
          <div>content.html</div>
        </script>
        <script type="text/ng-template" id="views/modals/splash.html">
          <div>splash.html</div>
        </script>
    </div>

非常感谢！我将给予答案赏金。

Answer 1

你几乎就在那里，但你需要使用绝对名字目标来定位根状态的命名视图。

改变这个：

          modal   : { templateUrl: 'views/modals/splash.html' }

到此：

          'modal@'   : { templateUrl: 'views/modals/splash.html' }

你正在做的是说在状态'modal'定位命名视图""（空字符串映射到根状态）

这是一个更新的小提琴：http://jsfiddle.net/0yanupup/1/

---

阅读本页一次或两次：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

查看名称 - 相对名称与绝对名称

  

在幕后，为每个视图分配一个绝对名称，该名称遵循viewname @ statename的方案，其中viewname是视图指令中使用的名称，状态名称是状态的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
  })

  

请注意，视图名称现在指定为绝对名称，而不是相对名称。它定位于根未命名模板中的“过滤器”，“tabledata”和“图表”视图。由于它没有命名，因此'@'后面没有任何内容。根未命名的模板是您的index.html。