不同状态不显示模板内容

Question

我有一个基本的 Index.html 文件，其结构如下：

<body class="{{$state.current.name.replace('.','-')}}">
    <div ui-view>
        <div ng-include src="'partials/menu.html'"></div>
        <!-- <div ng-menu class="ui top blue sidebar menu active"></div> -->

        <div class="view-height-100"></div>
    </div>

 ...
</body>

当我处于登录状态时，它运行良好：

  $stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'partials/login-area.html',
        controller: 'LoginController',
      });

但是，当我路由到 user.management 状态时，没有显示任何内容（但是 Chrome 正在加载模板，所以我可以访问范围和 .html 文件在那里）：

$stateProvider
  .state('user', {
    url: '/:buildingName',
    controller: 'CurrentBuildingController',
    data: {
      access: ['user']
    }
  })
  .state('user.management', {
    url: '/management',
    templateUrl: '/views/management.html',
    controller: 'ManagementController'
  })

Can someone explain me why?

Answer 1

Parent 状态简单 必须有目标 为它的 child （除非我们使用绝对命名来定位一些超级 parent, 但这是另一种方法)

.state('user', {
    url: '/:buildingName',
    template: "<div ui-view></div>",
    controller: 'CurrentBuildingController',
    data: {
      access: ['user']
    }
  })

看到我们现在有 template: "<div ui-view></div>",，它将作为任何 child 状态的视图目标 'user.xxx'

同时检查：

EXTEND - 让 child 指向 index.html

我们可以使用绝对命名，然后 child 将直接注入 index.html。有 a working plunker （故意 parent 不会加载，它没有任何模板）

  .state('parent', {
      url: "/parent",
      //templateUrl: 'tpl.html',
  })
  .state('parent.child', { 
      url: "/child",
      views: {
        '@': {
          templateUrl: 'tpl.html',
          controller: 'ChildCtrl',
        }
      }
  })

查看此以获取更多信息：

不同状态不显示模板内容

Different states doesn't show template content

state

nested

angularjs

angular-ui-router

Angularjs ui-router not reaching child controller