Question

以下是 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页面，但只有背景颜色不是文本，虽然我检查了浏览器控制台模板正在加载，让我知道我在这里做错了什么。

Answer 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'
        }
    }
})

Answer 2

尚无评论，也无法测试，但我认为您需要在文件名中使用点（＆＃39;。＆＃39;）：

templateUrl: 'templates/profile.init.html'

当然也会更改文件名。

嵌套视图在Ionic中变得空白

2 个答案: