离子模板内容不显示 | 离子模板内容不显示

本文介绍了离子模板内容不显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我做了使用的离子侧菜单和角状态机制离子基本菜单导航作为的但是，当家庭装载或任何菜单的项被点击没有内容被显示出来的网页的中心部分。这里的简化HTML ...

I've made a basic menu navigation with Ionic using ion-side-menus and an Angular state mechanism as described at http://joelhooks.com/blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs/ but no content is showing up in the center section of the page when home is loaded or any of the menu's items are clicked. Here's the simplified HTML ...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="testapp" ng-controller="MainCtrl">
    <ion-side-menus>

        <!-- Center content -->
        <ion-side-menu-content>
            <ion-header-bar class="bar-header">
                <button class="button button-icon" ng-click="toggleSideMenu()">
                    <i class="icon ion-navicon"></i>
                </button>
                <h1 class="title">Home</h1>
                <button class="button button-icon">
                    <i class="icon ion-star"></i>
                </button>
            </ion-header-bar>
        </ion-side-menu-content>

        <!-- Left menu -->
        <ion-side-menu side="left">
            <ion-list>
                <ion-item class="item item-icon-left" ng-repeat="item in menuItems" item="item" ng-click="enterState(item.id)">
                    <i class="{{item.icon}}"></i> {{item.name}}
                </ion-item>
            </ion-list>
        </ion-side-menu>
    </ion-side-menus>

    <script id="home.html" type="text/ng-template">
        <ion-view title="Home">
            <ion-content padding="true">
                <p>HOME</p>
            </ion-content>
        </ion-view>
    </script>

    <script id="page2.html" type="text/ng-template">
        <ion-view title="Page 2">
            <ion-content padding="true">
                <p>PAGE 2</p>
            </ion-content>
        </ion-view>
    </script>

    <script id="page3.html" type="text/ng-template">
        <ion-view title="Page 3">
            <ion-content padding="true">
                <p>PAGE 3</p>
            </ion-content>
        </ion-view>
    </script>

</body>
</html>

这是控制器JS ...

And here is the controller JS ...

angular.module('testapp', ['ionic'])
    .config(function($urlRouterProvider, $stateProvider) {
        "use strict";

        /* Set up the states for the application's different sections. */
        $stateProvider
            .state('home', {name: 'home', url: '/home', templateUrl: 'home.html', controller: 'MainCtrl'})
            .state('page2', {name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'MainCtrl'})
            .state('page3', {name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'MainCtrl'})
        ;
    })

    .controller('MainCtrl', function($scope, $state, $ionicSideMenuDelegate) {
        "use strict";

        /* Items for left side menu. */
        $scope.menuItems = [
            {id: 'page2', name: 'Page 2', icon: 'icon ion-person-stalker'},
            {id: 'page3', name: 'Page 3', icon: 'icon ion-person-stalker'}
        ];

        $scope.toggleSideMenu = function() {
            $ionicSideMenuDelegate.toggleLeft();
        };

        $scope.enterState = function(stateID) {
            $state.transitionTo(stateID);
        };

        $scope.enterState('home');
        $scope.$state = $state;
    })

正确的URL显示出来，所以我想国家机制工作正常，但在角模板离子含量没有出现。任何人都更有经验与离子能不能给我一个提示，这里有什么问题？

The correct URL shows up so I suppose the state mechanism is working properly but the Ionic content in the Angular templates isn't appearing. Can anyone more experienced with Ionic give me a hint what is wrong here?

推荐答案

您至少有两个问题：

在调用 $ scope.enterState（'家'）控制器; 。在另一方面每个状态调用同一个控制器。因此，你进入到同一状态首页。

in controller you call $scope.enterState('home');. On other hand each state calls the same controller. Therefore you enter to the same state home.

删除此行并添加配置： $ urlRouterProvider.otherwise（'/家庭'）;

这就是全部。

下面是工作

的 HTML 的

<html ng-app="testapp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Login</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
  </head>

 <body  ng-controller="MainCtrl">
    <ion-side-menus>

        <!-- Center content -->
        <ion-side-menu-content>
            <ion-header-bar class="bar-header">
                <button class="button button-icon" ng-click="toggleSideMenu()">
                    <i class="icon ion-navicon"></i>
                </button>
                <h1 class="title">Home1</h1>
                <button class="button button-icon">
                    <i class="icon ion-star"></i>
                </button>
            </ion-header-bar>


        <ion-nav-view class="slide-left-right"></ion-nav-view>

      </ion-side-menu-content>



        <!-- Left menu -->
        <ion-side-menu side="left">
            <ion-list>
                <ion-item class="item item-icon-left" ng-repeat="item in menuItems" item="item" ng-click="enterState(item.id)">
                    <i class="{{item.icon}}"></i> {{item.name}}
                </ion-item>
            </ion-list>
        </ion-side-menu>
    </ion-side-menus>

    <script id="home.html" type="text/ng-template">
        <ion-view title="Home">
            <ion-content padding="true">
                <p>HOME</p>
            </ion-content>
        </ion-view>
    </script>

    <script id="page2.html" type="text/ng-template">
        <ion-view title="Page 2">
            <ion-content padding="true">
                <p>PAGE 2</p>
            </ion-content>
        </ion-view>
    </script>

    <script id="page3.html" type="text/ng-template">
        <ion-view title="Page 3">
            <ion-content padding="true">
                <p>PAGE 3</p>
            </ion-content>
        </ion-view>
    </script>

</body>
</html>

的 JS 的

angular.module('testapp', ['ionic'])
    .config(function($stateProvider, $urlRouterProvider) {
        "use strict";

        /* Set up the states for the application's different sections. */
        $stateProvider
            .state('home', {name: 'home', url: '/home', templateUrl: 'home.html', controller: 'MainCtrl'})
            .state('page2', {name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'MainCtrl'})
            .state('page3', {name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'MainCtrl'})
        ;
        $urlRouterProvider.otherwise('/home');

    })

    .controller('MainCtrl', function($scope, $state, $ionicSideMenuDelegate) {
        "use strict";


        /* Items for left side menu. */
        $scope.menuItems = [
            {id: 'page2', name: 'Page 2', icon: 'icon ion-person-stalker'},
            {id: 'page3', name: 'Page 3', icon: 'icon ion-person-stalker'}
        ];

        $scope.toggleSideMenu = function() {

            $ionicSideMenuDelegate.toggleLeft();
        };

        $scope.enterState = function(stateID) {
          console.log(stateID);
            $state.transitionTo(stateID);
        };

       //$scope.enterState('home');

        $scope.$state = $state;
    })

这篇关于离子模板内容不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！