在角UI路由器子模板不工作 [英] In Angular ui-router child template not working

问题描述

我已经注册的状态测试的小孩 .child1 ，这里的父（测试）工作的罚款。当我浏览到状态 test.child1 URL被更改为＃/测试/ ch​​ild1 但视图保持不变，孩子模板不能正常工作

  angular.module（'uiRouterSample.contacts'，[
  ui.router
]）的.config（
  ['$ stateProvider'，'$ urlRouterProvider'，
    功能（$ stateProvider，$ urlRouterProvider）{
      $ stateProvider
      .STATE（'测试'，{
            网址：'/测试'，
            模板：'＆LT;一个UI的SREF =测试＆GT;家长和LT; / A＆GT; - ＆GT; ＆下;一个UI-SREF =child1。＆GT; child1和下; / A＆GT;'，
            控制器：['$范围，$状态，联系人，utils的，
              功能（$范围，$状态，联系人，utils的）{
              }]
        }）。状态（'test.child1'，{
            网址：'/ child1，
            模板：子模板工作正常
        }）
    }
  ]
）
 

解决方案

您需要在父状态（测试状态）的模板用户界面视图指令：

 模板：'＆LT;格UI画面/＆GT; ＆LT;一个UI的SREF =测试＆GT;家长和LT; / A＆GT; ＆LT;一个UI的SREF =child1。＆GT; child1＆LT; / A＆GT;＆LT; / DIV＆GT;，
 

基本上只要你有在UI路由器的状态，这将有孩子的状态，直接父PF这个孩子的状态还必须有一个用户界面视图指令在其模板

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.

这篇关于在角UI路由器子模板不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！