Angularjs

Question

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

我现在一切就绪，如果我单击特定的 link，子视图会按预期显示。

这是我的 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>

如果我单击 link，则会显示正确的模板和页面部分。我的问题是：如何在到达此页面时默认加载概览？

我看了 $urlRouterProvider.when，我认为 .when 如果你有不同的 URL 是好的。

我的 URL 对于加载了概览模板的页面应该是 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 以了解实施细节。

监听 $StateChangeStart 事件。如果这与您的状态匹配，请执行重定向。请务必执行 event.preventDefault() 以取消当前路线更改。
将控制器添加到您的父状态，它将检查 $state.current 值，如果该值匹配他的状态将重定向到子状态（这就是我在我的应用程序中拥有的）。

编辑：根据评论中的要求：

if($state.current.name != 'app.details'){
        $state.go('app.details.overview');
    }

Answer 3

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

我为 app.details / app.details.overview / app.details. 更改了状态 URLs，像这样编辑：

.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

Angularjs - set default child view to ui-view

angular-routing

angular-ui-router