在 Angular ui-router 子模板中不起作用 [英] In Angular ui-router child template not working

问题描述

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

angular.module('uiRouterSample.contacts', ['ui.router']).config([ '$stateProvider', '$urlRouterProvider',函数($stateProvider，$urlRouterProvider){$stateProvider.state('测试',{网址:'/测试'，模板:'<a ui-sref="test">父</a>-><a ui-sref=".child1">child1</a>',控制器:['$scope', '$state', 'contacts', 'utils',函数($scope，$state，contacts，utils){}]}).state('test.child1',{网址:'/child1'，template:'子模板工作正常'})}])

解决方案

在父状态(测试状态)的模板中需要一个 ui-view 指令:

 模板:'
<a ui-sref="test">父</a><a ui-sref=".child1">child1</a></div>',

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

I have registered a state test with a child .child1 , here parent (test) working fine . when i navigate to state test.child1 URL gets changed to #/test/child1 but the view remains same , child template not working

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

解决方案

You need a ui-view directive in the template of the parent state (the test state):

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

Basically whenever you have a state in ui-router which will have child states, the immediate parent pf that child state must also have a ui-view directive in its template.

这篇关于在 Angular ui-router 子模板中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！