Question

我已经注册了一个州test，其中有一个孩子.child1，这里的父母（test）工作正常。当我导航到状态test.child1时，网址会更改为#/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'
        })
    }
  ]
)

Answer 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指令。

Answer 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'
    })
   }]

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

2 个答案: