AngularJS UI-Router：渲染父部分和子部分

Question

我正在為AngularJS使用UI-Router框架，以渲染嵌套的部分。 我在渲染父子項和子子項時遇到問題。 這是我的代碼：

window.app.config(['$stateProvider', '$urlRouterProvider', 
  function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('class', {
        url: '/classes/:classId',
        templateUrl: '/views/class.html',
        controller: 'ClassCtrl',
    })
      .state('class.questionList', {
        url: '',
        templateUrl: '/views/questionList.html',
      })
  }]);

在聲明子狀態時，我將url設置為空字符串，以便它可以與父字符串同時呈現。 但是，這不起作用，僅父視圖正在渲染。

Answer 1

將屬性“ abstract：true”添加到父狀態，以通知UI-Router該狀態只能通過激活子狀態來激活。 這將使URL / classes /：classId激活兩種狀態。

Answer 2

隱含子狀態意味着您要從現有狀態導航到該狀態，這應該更新與該狀態匹配的url。

從您的路線看來，您想要在class.html的ui-view中顯示某些class.html ，但不希望將狀態更改為child。 最好使用ng-include ，它將很好地達到目的

在您的class.html ，添加ui-view使用ng-include

<ng-include src="'/views/questionList.html'"></ng-include>