javascript - ionic 模板内容未显示-6ren

javascript - ionic 模板内容未显示

转载作者：搜寻专家更新时间：2023-10-31 22:06:53

我已经使用 ion-side-menus 和 Angular 状态机制通过 Ionic 进行了基本的菜单导航，如 http://joelhooks.com/blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs/ 中所述。但是当加载主页或单击任何菜单项时，页面的中心部分没有显示任何内容。这是简化的 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>

这是 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，所以我认为状态机制工作正常，但 Angular 模板中的 Ionic 内容没有出现。任何对 Ionic 更有经验的人都可以提示我这里出了什么问题吗？

最佳答案

简短回答

您至少有两个问题:

在 Controller 中调用 $scope.enterState('home'); .另一方面，每个状态调用相同的 Controller 。因此你进入相同的状态 home .
删除此行并添加 config : $urlRouterProvider.otherwise('/home');
在 HTML 中添加 <ion-nav-view class="slide-left-right"></ion-nav-view>

就这些。

这里正在工作 Demo

工作代码

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>

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;
    })

关于javascript - ionic 模板内容未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23242075/

文章推荐： ios - 找不到 Amazon Cognito 身份池

文章推荐： php - 使用 php 调用电话和处理电话

c++ - 模板的特化模板的定义
namespace std { template <> class hash{ public : size_t operator()( cons
javascript - 出于 SEO 原因，对相同内容使用 Django 模板 + Vue 模板
我正在构建一个 Javascript 交互性有限的 Django 应用程序，并且正在研究如何将 Vue 模板与 Django 模板合并以实现相同的内容。想象一个无限滚动的页面，其中 SEO 非常重要
javascript - 外部类调用 LitElement 组件方法(传递 html 模板)，组件方法更新其 html 模板
我需要一个由游戏逻辑组成的外部类，调用 LitElement 组件，并向其传递一个 html 模板文字，该组件将使用该文字来更新其自己的 html 模板文字的一部分。在下面的代码中，您将看到组件的一
ember.js - 是否可以使用脚本标签加载 Handlebars 模板？或者在 Ember.js 中以编程方式定义 Handlebars 模板
很简单，我不想在 html 文件中定义所有 Handlebars 模板我试过了但这并没有奏效。我是否可以不以编程方式定义模板，甚至只是加载 Handlebars 文件，以便我可以重用，而且我觉得
templates - JQuery 1.5 模板 : JQuery 1. 5 未呈现我的模板。如何调用 JQuery 1.5 模板？
在此代码中，j 正确地成为对象:j.name、j.addr、j.city、j.state 和 j.zip。但是，成功函数有一个 JavaScript 错误 .tmpl() 不是函数。 {{t
Django 模板
Django模板不会？点进来，总结了模板语法传值取值、过滤器和自定义过滤器、模板标签的分类、中间件403报错如何解决、如何继承模板~👆 Django 模板模板传值取值后端传值键值对形式：{‘n
C++模板
哈喽大家好，我是鹿九丸 \color{red}{鹿九丸}鹿九丸，今天给大家带来的是C++模板。如果大家在看我的博客的过程中或者学习的过程中以及在学习方向上有什么问题或者想跟我交流的话可以加我的企
PHP 模板
我正在用 PHP 编写一个简单的模板层，但我遇到了一些困难。目前它是这样工作的: 首先，我使用 fetch_template 从数据库中加载模板内容 - 这可行(如果您有兴趣，我会在启动时收集所有模板
Django 模板
我正在制作有关模板的 Django 教程。我目前处于此代码: from django.template import Template, Context >>> person = {'name': '
Jquery 模板
我正在使用 Jquery 模板来显示传入的 JSON 数据我想将模板加载到可缓存的外部文件中。我该怎么做？更新 http://encosia.com/2010/12/02/jquery-templa
Python 模板
这是我的观点.py: from django.http import HttpResponse from django.template.loader import get_template from
JavaScript 模板
我试图说服一位同事在项目的前端使用 Mustache/Hogan，我提出了以下建议: 有一个 templates.js 文件，大致如下所示: var tpl_alert = '{{msg}}'; va
函数中的c++模板
我想创建一个通用的数组函数。在我的 API 中，我有一个通用容器，我需要将其转换为正确的类，但我想让它通用 template void UT::printArray(CCArray* arr, T t
JavaScript 模板
有谁知道是否有办法在 Genshi 中创建 javascript 模板？我的意思是，我需要一个 .js 文件，可以在其中使用等指令。等等。有什么想法吗？谢谢! 最佳答案你可以直接在html中这
HTML 模板
我想知道是否可以设置某种 HTML 模板系统，基本上我有 3 个不同的文件: - header.html - footer.html - landing.html(landing.html 是包含页面
HTML 模板
我正在尝试构建以下 HTML 模板: 这很简单，如果我使用红色容器 1-4，语法如下: 1 2 3 4 5 6 7 8 9 https://jsfi
模板的c++模板
#include "boost/numeric/ublas/matrix.hpp" using namespace boost::numeric::ublas; template class Lay
类中的c++模板
我在一个类中有一个函数，它传递了一个函数及其参数，然后将它们绑定(bind)到一个函数调用中并调用该函数等。这已经被快速组合在一起以测试我知道代码不是很好的概念。 class Profiling {
用于十进制和任意基数之间转换的c++模板
是否有一个 c++ 结构或模板(在任何库中)允许我在十进制和任何其他基数之间进行转换(很像 bitset 可以做的)？最佳答案是的，你可以使用unsigned int: unsigned int
C++泛型一：模板
数据类型给程序设计带来的困扰及解决方案 int maxt(int, int); double maxt(double, double); 若有一种占位符T，能够代替类型，便可以简化代码的冗余编写

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城