Question

我创建了这个小应用程序，我有以下状态：

restricted.route.js

$stateProvider.state('restricted', {
  url: '/restricted',
  templateUrl: 'app/restricted/restricted.html',
  abstract: true
});

pages.route.js

$stateProvider.state('restricted.pages', {
  url: '/pages',
  templateUrl: 'app/restricted/pages/pages.html',
  controller: 'pagesController',
  controllerAs: 'vmPages'
});

detail.route.js

$stateProvider.state('restricted.pages.detail', {
    url: '/:id',
    controller: 'pageDetailController',
    controllerAs: 'vmDetail',
    templateUrl: 'app/restricted/pages/detail/detail.html'
});

app.run.js

$urlRouterProvider.otherwise('/restricted/dashboard');

当我加载URL＃/ restricted / pages时，一切正常。加载控制器并显示视图。当我加载URL＃/ restricted / pages / 1时，加载并执行状态'restricted.pages'的控制器和视图。状态清楚地被识别，因为$ urlRouterProvider.otherwise没有被执行。

有没有人知道我在这里做错了什么？

谢谢！

Answer 1

我认为你的问题在于HTML，嵌套状态应该加载到父元素的ui-view标签中。

Answer 2

是否有意将详细信息作为页面（列表？）状态的子状态？如果是这样，您需要将<div ui-view></div>放入名为app/restricted/pages/pages.html的模板中。

如果那不是您的意图，我建议将详细状态重命名为restricted.pages_detail，因为每个点都会在状态定义中引入嵌套级别。

angularJs stateprovider子状态不加载控制器和模板

2 个答案: