嵌套状态不适用于Angular UI路由器

Question

我在第一次尝试lib，它看起来像嵌套状态不按预期工作。

的状态：

1. 在3 UI-视图的home状态显示内容（顶部，左侧和内容）
2. 的home.splash状态必须显示相同的UI的视图和一个新一个（模态）。希望继承UI的意见不应该因为它们已经被加载眼下更新DOM ...

，我看到了URL变化，这里是我的控制台：

这里是的的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

视图名称 - 相对与绝对名称

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

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

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