Angular：將第一個孩子插入父級（ui-view）

Question

我想把第一個孩子元素放入父級，例如test1.html應該在test.html之內。這裏的html代碼：

的test.html：

<div ui-view></div> 

test1.html：

<h1>First</h1> 
<button>Go to second page</button> // This should render test2.html inside test.html 

test2.html：

<h2>Second</h2> 

test1.controller.js：

.state('app.test', { 
     url: '^/test', 
     templateUrl: '/test/test.view.html', 
     controller: 'TestController', 
     controllerAs: 'testCtrl' 
    }) 
    .state('app.test1', { 
     url: '^/test1', 
     templateUrl: '/test1/test1.view.html', 
     controller: 'test1Controller', 
     controllerAs: 'test1Ctrl' 
    }) 
    .state('app.test2', { 
     url: '^/test2', 
     templateUrl: '/test2.view.html', 
     controller: 'test2Controller', 
     controllerAs: 'test1Ctrl' 
    }) 

目前它只是加載主頁test.html頁面內沒有任何test1.html。

Answer 1

試試這個：

.state('app.test', { 
      url: '^/test', 
      templateUrl: '/test/test.view.html', 
      controller: 'TestController', 
      controllerAs: 'testCtrl' 
     }) 
     .state('app.test.test1', { 
      url: '/test1', 
      templateUrl: '/test1/test1.view.html', 
      controller: 'test1Controller', 
      controllerAs: 'test1Ctrl' 
     }) 
     .state('app.test.test2', { 
      url: '/test2', 
      templateUrl: '/test2.view.html', 
      controller: 'test2Controller', 
      controllerAs: 'test1Ctrl' 
     })