Question

我跟着this example设置了一个包含2个子视图的页面。

我现在已经掌握了一切，如果点击特定链接，子视图会按预期显示。

这是我的app.js文件，您可以在其中查看我的所有州：

   $stateProvider.state('app',
      name: 'app'
      url: '/app'
      abstract: true
      templateUrl: './sections/menu/menu.tpl.html'
    ).state('app.home',
      name: 'home'
      url: '/home'
      templateUrl: './sections/Home/Home.tpl.html'
    ).state('app.details',
      name: 'appDetails'
      url: '/details/:zoneID'
      templateUrl: './sections/zoneDetails/zoneDetails.tpl.html'
      controller: 'currentZoneFilter'
    ).state('app.details.overview',
      name: 'appDetailsOverview'
      url: '/details/:zoneID'
      templateUrl: './sections/zoneDetails/zoneDetailsOverview.tpl.html'
    ).state('app.details.edit',
      name: 'appDetailsEdit'
      url: '/details/edit/:zoneID'
      templateUrl: './sections/zoneDetails/zoneDetailsEdit.tpl.html'
    ).state('app.setup',
      name: 'setup'
      url: '/setup'
      templateUrl: './sections/setup/setup.tpl.html'
    ).state 'app.about',
      name: 'about'
      url: '/about'
      templateUrl: './sections/about/about.tpl.html'
      controller: 'info'

    $urlRouterProvider.otherwise 'app/home'

如您所见，我有app.details，app.details.overview，app.details.edit。

app.details是父母，这是页面代码：

This it the parent page
<a ui-sref="app.details.edit">Show edit</a>
<a ui-sref="app.details.overview">Show overview</a>
<div ui-view></div>

如果单击该链接，将显示正确的模板和页面部分。我的问题是：当我到达此页面时，如何默认加载概述？

我查看了$urlRouterProvider.when，如果您有不同的网址，我认为.when很好。

对于加载了概述模板的页面，我的网址应为details/:zoneID，加载修改模板时，我的网址应为details/edit/:zoneID，因此我认为.when不是一个好方法。有帮助吗？感谢

Answer 1

您必须使用$ urlRouterProvider的规则功能。

$urlRouterProvider.rule(function ($injector, $location) {
                // check if the location is the desired location then move to the //new location.
            });

Answer 2

以下是一些方法。检查https://github.com/angular-ui/ui-router/wiki以获取实施详细信息。

收听@PersistenceContext private EntityManager entityManager; ... new JPAUpdateClause(entityManager, purchaseOrder).事件。如果这与您的状态匹配，请执行重定向。请务必执行$StateChangeStart以取消当前路线更改。
将控制器添加到父状态，它将检查$ state.current值，如果值匹配，则状态将重定向到子节点（这是我在我的应用程序中所拥有的）。

编辑：根据评论要求：

event.preventDefault()

Answer 3

最后，我终于解决了这个问题。

我更改了app.details / app.details.overview / app.details.edit的状态网址，如下所示：

.state('app.details',
  name: 'appDetails'
  url: '/:zoneID'
  templateUrl: './sections/zoneDetails/zoneDetails.tpl.html'
  controller: 'currentZoneFilter'

.state('app.details.overview',
  name: 'appDetailsOverview'
  url: '/details'
  templateUrl: './sections/zoneDetails/zoneDetailsOverview.tpl.html'

.state('app.details.edit',
  name: 'appDetailsEdit'
  url: '/edit/day:day'
  templateUrl: './sections/zoneDetails/zoneDetailsEdit.tpl.html'

现在，URL以zoneID开头，然后附加详细信息或编辑以显示正确的模板。

Angularjs - 将默认子视图设置为ui-view

3 个答案: