嵌套视图在 Ionic 中变为空白答案

【问题标题】：Nested view is coming blank in Ionic嵌套视图在 Ionic 中变为空白
【发布时间】：2016-01-17 20:31:41
【问题描述】：

以下是我在 app.js 中的简单路线 -

  .state('signup', {
    url: '/signup',    
    templateUrl: 'templates/signup.html',
    controller: 'signupCtrl'
  })
  .state('profile', {
    url: '/profile',
    abstract: true,
    templateUrl: 'templates/profile.html',
  })  
  .state('profile.init', {
    url: '/profile-init',
    templateUrl: 'templates/profile-init.html'
  })

我在点击时在signup 页面中创建了一个按钮，该按钮应将用户带到profile-init 页面代码 - $state.go('profile.init')

在 profile.html 我放置了 -

<ion-content style="background: #c3c3c3"></ion-content>

在 profile-init.html 页面中 -

<ion-header-bar class="bar-positive">
  <h1 class="title">Profile</h1>
</ion-header-bar>
  <div class="row">
    <div class="col col-10"></div>
    <div class="col col-80 padding">
        Thanks for showing your interest
    </div>
    <div class="col col-10">&nbsp;</div>
  </div>
<ion-footer-bar class="bar-stable">
  <button class="button button-clear" ng-click="hello()">Forward</button>
</ion-footer-bar>

但它正在移动到 /#/profile/profile-starter 页面，但只有背景颜色而不是文本，尽管我检查了浏览器控制台模板正在加载，让我知道我在做什么错。

【问题讨论】：

中间内容应该包裹在<ion-content>元素内。
@PankajParkar 我尝试将其添加到我的 profile-init.html 页面，但仍然是空白

标签： javascript css angularjs ionic-framework angular-ui-router

【解决方案1】：

创建ion-nav-view

<ion-nav-view name="profile"></ion-nav-view>

并在 app.js 中修改路由

.state('profile.init', {
    url: '/profile-init',
    views: {
        'profile': {
            templateUrl: 'templates/profile-init.html'
        }
    }
})

【讨论】：

【解决方案2】：

尚不能评论，也无法测试，但我认为您需要在文件名中使用点 ('.')：

templateUrl: 'templates/profile.init.html'

当然也要更改文件名。

【讨论】：