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。

在您的路线中，您似乎希望在ui-view class.html中显示某些内容，但不希望状态更改为子级。最好使用ng-include，这样可以很好地发挥作用

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

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

AngularJS UI-Router：使用子部分渲染父部分

2 个答案: