离子离子视图标题未显示

Question

I am relatively new to Ionic and I'm trying to make a simple login page. However when i put it won't show a header bar. Does anyone have any idea what i do wrong?

<ion-view view-title="Sign-In">
      <ion-content>
          <div class="list">
              <label class="item item-input">
                  <span class="input-label">Username</span>
                  <input type="text" ng-model="user.username">
              </label>
              <label class="item item-input">
                  <span class="input-label">Password</span>
                  <input type="password" ng-model="user.password">
              </label>
          </div>
          <div class="padding">
              <button class="button button-block button-positive" ng-       click="signIn(user)">
                  Sign-In
              </button>
              <p class="text-center">
                  <a href="#/forgot-password">Forgot password</a>
              </p>
          </div>
      </ion-content>
   </ion-view>

Answer 1

You haven't written the html for the header. You need to add a div with the class="bar bar-header" to display the header.

  <ion-view view-title="Sign-In">
      <div class="bar bar-header bar-light">
          <h1 class="title">Header</h1>
      </div>
      <ion-content class="has-header">
          <div class="list">
              <label class="item item-input">
                  <span class="input-label">Username</span>
                  <input type="text" ng-model="user.username">
              </label>
              <label class="item item-input">
                  <span class="input-label">Password</span>
                  <input type="password" ng-model="user.password">
              </label>
          </div>
          <div class="padding">
              <button class="button button-block button-positive" ng-click="signIn(user)">
                  Sign-In
              </button>
              <p class="text-center">
                  <a href="#/forgot-password">Forgot password</a>
              </p>
          </div>
      </ion-content>
   </ion-view>

Here is a working fiddle .