AngularJS UI-Router:渲染父部分与子部分

AngularJS UI-Router: Rendering parent partial with child partial

本文关键字：父部 UI-Router AngularJS      更新时间：2023-09-26

我正在使用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 设置为空字符串，以便它与父级同时呈现。但是，这不起作用，只有父视图正在呈现。

将属性 "abstract： true" 添加到父状态，以通知 UI-Router 此状态只能通过激活子状态来激活。这将使 URL/classes/：classId 激活这两种状态。

具有子状态隐式意味着您希望从现有状态导航到该状态，这应该更新与状态匹配的 URL。

从您的路线来看，您似乎想在class.html ui-view中显示某些内容，但不希望状态更改为子状态。最好使用可以很好地达到目的的ng-include

在你class.html，你已经添加ui-view使用ng-include 

<ng-include src="'/views/questionList.html'"></ng-include>
相关文章：