angularjs - ionic 路由问题，显示空白页面

Question

我开始在侧菜单启动应用程序之上构建 ionic 应用程序。入门应用程序有一个抽象的基本状态“app”，所有侧菜单页面都是该应用程序的子级，例如 app.search、app.browse、app.playlists 等。

我有类似的层次结构。但是，我希望起始页面是其他页面，这意味着它位于应用程序级别。

各州如下所示:

$stateProvider

.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/menu.html",
  controller: 'AppCtrl'
})

.state('join', {
  url: "/join",
  views: {
    'menuContent' :{
      templateUrl: "templates/join.html",
      controller: 'joinCtrl'
    }
  }
})

.state('app.search', {
  url: "/search",
  views: {
    'menuContent' :{
      templateUrl: "templates/search.html",
      controller: 'searchCtrl'
    }
  }
})

.state('app.results', {
  url: "/results",
  views: {
    'menuContent' :{
      templateUrl: "templates/results.html",
      controller: 'resultsCtrl'
    }
  }
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');

当我运行应用程序时，URL 默认为

http://192.168.1.4:8100/#/join

并显示一个空白页。显然，join.html 不是空白。另外，joinCtrl 中的console.log 消息也不会输出。

我无法弄清楚为什么它没有加载加入页面。当我将 else 更改为指向“/app/search”时，一切正常。

知道发生了什么吗？如何默认加载初始页面，然后导航到“app.search”状态？

Answer 1

我希望因为该应用程序是抽象的 - 它的存在是有原因的。成为父/布局状态。在其模板中很可能应该存在所有其他状态。

如果是，请检查此 working example我创建就是为了证明这一点。我们需要的是将 join 标记为 app 状态的子级。然后 'menuContent' 占位符将在应用模板中正确搜索:

.state('join', {
      parent: 'app',
      url: "^/join",
      views: {
        'menuContent': {
          templateUrl: "tpl.join.html",
          controller: 'joinCtrl'
        }
      }
})

有一个working plunker

定义 url: "^/join", 是为了支持这样的想法，即 url 定义如下:

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');

即使对于嵌套状态也适用(加入是应用程序的子级)。请参阅:

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

这只是一种方法...如果连接不是嵌套状态，我们可以做类似的事情，但它应该针对 unnmaed View “”而不是“menuContent”