Question

我正在开发一个Ionic应用程序，并使用Ionic选项卡模板初始化项目。这工作正常，但我现在正在尝试添加一个登录页面，它不会是一个标签。

我尝试过多种方式添加此模板，但无法使用。我一直试图在html中添加内联模板，但这也不起作用，也没有给出任何错误。

我的代码如下：

的index.html

  <body ng-app="starter">

    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>

    <script type="text/ng-template" id="/home.html">

      <ion-view title="Home">
        <ion-content padding="true">
          <h2>Home Page</h2>
          <p>Heres the main route for the app.</p>
        </ion-content>
      </ion-view>

    </script>
</body>

app.js

 $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

    .config(function($stateProvider, $urlRouterProvider) {

      // Ionic uses AngularUI Router which uses the concept of states
      // Learn more here: https://github.com/angular-ui/ui-router
      // Set up the various states which the app can be in.
      // Each state's controller can be found in controllers.js
      $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'home.html'
      })


  // setup an abstract state for the tabs directive
  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

.state('tab.login', {
    url: '/login',
    views: {
      'tab-login': {
        templateUrl: 'templates/tab-login.html',
        controller: 'LoginCtrl'
      }
    }
      })

      .state('tab.profile', {
        url: '/profile',
        views: {
          'tab-profile': {
            templateUrl: 'templates/tab-profile.html',
            controller: 'ProfileCtrl',
            resolve: {
              postPromise: function(Posts) {
                return Posts.getAll();
              }
            }
          }
        }
      })
      .state('tab.post-detail', {
        url: '/profile/:postId',
        views: {
          'tab-profile': {
            templateUrl: 'templates/post-detail.html',
            controller: 'ProfileCtrl'
          }
        }
      })
      .state('tab.settings', {
        url: '/settings',
        views: {
          'tab-settings': {
            templateUrl: 'templates/tab-settings.html',
            controller: 'AccountCtrl'
          }
        }
      })
      .state('tab.camera', {
        url: '/camera',
        views: {
          'tab-camera': {
            templateUrl: 'templates/tab-camera.html',
            controller: 'CameraCtrl'
          }
        }
      });
      $urlRouterProvider.otherwise('/tab/profile');
    });

由于某些奇怪的原因，这不会在html页面上呈现内容。我查看了项目中的每个文件，以防问题是它被初始化为标签项目，但找不到任何内容。

似乎可能有一些我很遗憾的事情。

非常感谢任何帮助。

Answer 1

我弄清楚为什么会这样，以及如何解决这个问题。

在index.html中的上述代码（样板tab-template离子代码）中，有一个<ion-nav-view>。

父抽象状态使用此导航视图进行渲染。如果您想要一个位于选项卡之外的视图，您只需使用该导航视图。

解决方案是使用另一个不是抽象状态的子状态的状态。

 .state('other', {
   url: "/other",
   templateUrl: "templates/other.html"
   controller: 'OtherCtrl'
 })

要进入此页面，您可以从应用程序中的其他位置链接到此状态：

<a href="#/other">Go Somewhere Else</a>

希望这有助于遇到同一问题的其他人。

Answer 2

我看到的第一个错误是您没有在配置上定义默认路由：

$urlRouterProvider.otherwise("/home");

因此，您的应用已启动，但未转到默认页面。

如果您使用的是ionic serve，则可以看到uri保持/。尝试手动转到/home并查看该网页是否已呈现。

渲染内联视图离子不起作用

2 个答案: