具有嵌套视图/控制器的Angular UI路由器嵌套状态

Question

尝试找到一种在父视图和控制器下加载嵌套状态视图和控制器的方法。我已经成功路由，但它没有加载嵌套模板或控制器。

感谢帮助！

stateHelperProvider.state({
name: 'artist',
url: '/' + artistSlug,
abstract: true,
resolve: {
  artist: ['appArtist', function(appArtist) {
    return app.getArtist();
  }]
},
children: [
  {
    name: 'events',
    url: '/',
    templateUrl: "/templates/events/events.html",
    controller: "eventsCtrl",
    parent: 'artist'
  },
  {
    name: 'extra-info',
    url: '/extra-info',
    templateUrl: "/templates/extra-info.html",
    parent: 'artist'
  },
  {
    name: 'articles',
    url: '/articles',
    templateUrl: "/templates/articles/articles.html",
    controller: "articlesCtrl",
    parent: 'artist'
  }
]
});

Answer 1

您可以按照以下方式执行此操作：

var myApp = angular.module('angularApp', ['ui-router'])

myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('artist', {
        url: '/artist',
        templateUrl: 'xxxxx',
        controller: 'xxxxCtrl'
    })
    .state('artist.events', {
        url: '/events',
        templateUrl: '/templates/events/events.html',
        controller: 'eventsCtrl'
    })
    .state('artist.extra-info', {
        url: '/extra_info',
        templateUrl: '/templates/extra-info.html'
    })
    .state('artist.articles', {
        url: '/articles',
        templateUrl: '/templates/articles/articles.html',
        controller:'articlesCtrl'
    })
});

（或）

myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('artist', {
        url: '/artist',
        templateUrl: 'xxxxx',
        controller: 'xxxxCtrl'
    })
    .state('events', {
        url: '/events',
        parent:'artist',
        templateUrl: '/templates/events/events.html',
        controller: 'eventsCtrl'
    })
    .state('extra-info', {
        url: '/extra_info',
        parent:'artist',
        templateUrl: '/templates/extra-info.html'
    })
    .state('articles', {
        url: '/articles',
        parent:'artist',
        templateUrl: '/templates/articles/articles.html',
        controller:'articlesCtrl'
    })
});