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

Question

我是第一次尝试该库，嵌套状态似乎没有按预期工作。

各州：

home状态显示内容3ui-views(top,left and content)
home.splash状态必须显示相同的ui-views和一个新的（模态）。希望继承的 ui-views 不应该更新 DOM 因为它们已经加载了...

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

这是 jsfiddle link： 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' 定位到状态 ""（空字符串映射到根状态）

这是更新后的 fiddle：http://jsfiddle.net/0yanupup/1/

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

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

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

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

Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your index.html.

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

Nested states not working with Angular UI Router

angularjs

angular-ui-router

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