Ionique modèle de contenu ne présentant pas de
J'ai fait un menu de base de la navigation avec des Ionique à l'aide de ion-côté-menus et Angulaire de l'état mécanisme décrit à http://joelhooks.com/blog/2013/07/22/the-basics-of-using-ui-router-with-angularjs/ mais le contenu ne s'affiche dans la partie centrale de la page lorsque la maison est chargé ou à l'un des menus les éléments sur lesquels vous cliquez. Voici la procédure simplifiée de 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>Et ici, c'est le contrôleur de 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;
})L'URL correcte s'affiche donc je suppose que l'état du mécanisme fonctionne correctement, mais le contenu Ionique dans l'angle de modèles n'apparaissent pas. Quelqu'un peut plus d'expérience avec Ionique me donner un indice de ce qui est le problème ici?
OriginalL'auteur BadmintonCat | 2014-04-23
Vous devez vous connecter pour publier un commentaire.
RÉPONSE COURTE
Vous avez au moins deux questions:
dans le contrôleur de vous appeler
$scope.enterState('home');. Sur l'autre main chaque état des appels d'un même contrôleur. Par conséquent, vous entrez dans le même étathome.Supprimer cette ligne et ajouter dans
config:$urlRouterProvider.otherwise('/home');<ion-nav-view class="slide-left-right"></ion-nav-view>C'est tout.
Voici de travail Démo
CODE DE TRAVAIL
HTML
JS
Pour une raison quelconque mon point de vue, le contenu ne s'affichent pas lorsque j'utilise le <script> la méthode. Le contrôleur n'a en effet de la charge. Quelle pourrait être la raison s'il vous plaît? Merci!
OriginalL'auteur Maxim Shoustin