Question

我使用ui-router没有任何嵌套的以下工作代码：

           state('speaker', {
                url: '/speaker/:id',
                templateUrl: 'app/speakers/speaker-detail.html',
                controller: 'SpeakerDetailController as vm',
                resolve: {
                    speakerResourceService: 'speakerResourceService',
                    speaker: function(speakerResourceService,$stateParams) {
                        return speakerResourceService.get({id: $stateParams.id}).$promise;
                    }
                }
            }).

我试图把它拆开，如下所示。它有点工作，但控制器永远不会被调用。

           state('speaker', {
                abstract: true,
                url: '/speaker',
                templateUrl: 'app/speakers/speaker-detail.html'
            }).
            state('speaker.id', {
                parent: 'speaker',
                url: '/:id',
                templateUrl: 'app/speakers/speaker-detail.html',
                controller: 'SpeakerDetailController as vm',
                resolve: {
                    speakerResourceService: 'speakerResourceService',
                    speaker: function(speakerResourceService,$stateParams) {
                        return speakerResourceService.get({id: $stateParams.id}).$promise;
                    }
                }
            }).

欢迎提供所有提示。

Answer 1

我创建了working example here。我们需要的是一个儿童目标 - 在父母内：

.state('speaker', {
  abstract: true,
  url: '/speaker',
  //templateUrl: 'app/speakers/speaker-detail.html'
  template: "<div ui-view></div>"
}) 
.state('speaker.id', {
  parent: 'speaker',
  url: '/:id',
  //templateUrl: 'app/speakers/speaker-detail.html',
  template: "<div>this is a child state inside of a prent ui-view"
   + "<pre>{{$stateParams | json }}</pre>"
   + " <pre>{{$state.current | json }}</pre></div>",
  controller: 'SpeakerDetailController as vm',
  resolve: {
    speakerResourceService: 'speakerResourceService',
    speaker: function(speakerResourceService, $stateParams) {
      return 1;
      //return speakerResourceService.get({ id: $stateParams.id }).$promise;
    }
  }
});

那么，发生了什么？而不是：

// parent
.state('speaker', {
    templateUrl: 'app/speakers/speaker-detail.html'
    ...
// child
.state('speaker.id', {
    templateUrl: 'app/speakers/speaker-detail.html',
    ...

我们有父和子的相同模板 - 我们需要在父...内部创建一个锚点/目标...其中将放置嵌套/子视图：

// parent
.state('speaker', {
    // this does not have a target
    // templateUrl: 'app/speakers/speaker-detail.html'
    // this will instruct UI-Router where to inject child
    template: "<div ui-view></div>"
    ...

检查here

Answer 2

我认为您需要将controller属性更改为controllerAs: 'vm'

见这里：https://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider

此外，您需要确保模块中包含ngRoute，并在应用中安装路由脚本。我假设你已经完成了这项工作，因为它“有点'。”

另外，我会仔细检查您使用的版本，以确保它与我提供的信息相符（假设您使用的是1.3.6版本）。

希望这有帮助！祝你好运！

AngularJS ui-router不像我期望的那样使用嵌套url

2 个答案: