在 Angular ui-router 子模板中不起作用答案

【问题标题】：In Angular ui-router child template not working在 Angular ui-router 子模板中不起作用
【发布时间】：2016-12-16 15:02:43
【问题描述】：

我已经注册了一个状态 test 和一个孩子 .child1 ，这里的父母 (test) 工作正常。当我导航到状态test.child1 URL 更改为#/test/child1 但视图保持不变，子模板不起作用

angular.module('uiRouterSample.contacts', [
  'ui.router'
])

.config(
  [          '$stateProvider', '$urlRouterProvider',
    function ($stateProvider,   $urlRouterProvider) {
      $stateProvider
      .state('test',{
            url:'/test',            
            template:'<a ui-sref="test">Parent</a> -> <a ui-sref=".child1">child1</a>',
            controller: ['$scope', '$state', 'contacts', 'utils',
              function (  $scope,   $state,   contacts,   utils) {
              }]
        }).state('test.child1',{
            url:'/child1',            
            template:'Child template working fine'
        })
    }
  ]
)

【问题讨论】：

标签： angularjs angular-ui-router angular-ui

【解决方案1】：

您需要在父状态（测试状态）的模板中添加ui-view 指令：

  template:'<div ui-view/> <a ui-sref="test">Parent</a>  <a ui-sref=".child1">child1</a></div>',

基本上，只要您在 ui-router 中有一个状态将具有子状态，则该子状态的直接父 pf 也必须在其模板中具有 ui-view 指令。

【讨论】：

@Vimal 我在您发布的代码中没有在测试状态的模板中看到 ui-view。

【解决方案2】：

发布此作为答案，因为我没有足够的代表发表评论。正如 Mohammad 所提到的，您需要在父状态的模板中添加一个 ui-view。您的 Index html 中的 ui-view 只允许您呈现父状态（test 状态），但为了呈现 .child1 状态，它需要在其父状态中再添加一个 ui-view，在这种情况下是test 状态。

因此，将test 状态的模板配置为包含ui-view：

angular.module('uiRouterSample.contacts', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider',
   function ($stateProvider,   $urlRouterProvider) {
     $stateProvider
       .state('test',{
         url:'/test',            
         template:'<div ui-view/> <a ui-sref="test">Parent</a> -> <a ui-sref=".child1">child1</a></div>',
         controller: ['$scope', '$state', 'contacts', 'utils',
           function (  $scope,   $state,   contacts,   utils) {
           }]})
    .state('test.child1',{
        url:'/child1',            
        template:'Child template working fine'
    })
   }]

【讨论】：