爲什麼我的視圖不會出現在angular-ui-router中？

Question

下面是我的路由器的狀態：

var homeWords = { 
    name: 'home.words', 
    url: 'words', 
    views: { 
     'home@': { 
      templateUrl: 'app/admin/word/words.html' 
     } 
    } 
}; 

var homeWordsWord = { 
    name: 'home.words.word', 
    url: '/:wordId', 
}; 

var homeWordsWordEdit = { 
    name: 'home.words.word.edit', 
    url: '/edit', 
    templateUrl: 'app/admin/word/word.html', 
}; 

和我words.html：

<div class="mw100p" 
    ng-show="$state.is('home.words') || $state.is('home.words.word')"> 
    <ng-include src="'/app/admin/word/words-controls.html'"></ng-include> 
    <ng-include src="'/app/admin/word/words-grid.html'"></ng-include> 
    <div class="grid form contentInnerPanel w100p" 
     ng-show="exs.gridNoDataMessage != null" 
     style="margin-top: 0; border-top: none;"> 
     <div class="gridBody"> 
      <div> 
       <div><div>{{wos.gridNoDataMessage}}</div></div> 
      </div> 
     </div> 
    </div> 
</div> 
<div ui-view></div> 

當我選擇home.words查看，然後我看到了HTML的第一部分。當我選擇home.words.word視圖時，我會看到HTML的第一部分。

當我選擇home.words.word.edit視圖，然後我什麼都看不到。

我應該改變<div ui-view></div>使用視圖名稱並以某種方式在homeWordsWordEdit

Answer 1

的templateUrl註明這一點，因爲你沒有提到home.words.word模板，ui-view指令，以便將作爲包裝view行事home.words.word.edit狀態其子女home.words.word。

var homeWordsWord = { 
    name: 'home.words.word', 
    url: '/:wordId', 
    template: '<div ui-view></div>' 
};