HI there, please can someone help me.
I’m building my first ever app using Ionic.
I’m really stuck and would like a little help, I’m sure the solution will be quite simple but I’m missing it at the moment !
Here’s a quick overview of what I’m trying to do.
Rather than using the regular sidemenu, I want the menu in a modal, which I’ve done.
My problem is I need to make my modal nav menu change the information that is displayed on the app page,
when the user clicks a link in the modal menu.
I’ve managed to work out how to close / hide the menu when you click it but not how to make the state / view change.
I am a little confused , so please explain carefully and slowly.
I have read so many docs that my poor little brain is in melt down …
Here’s my code
index.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>Ionic Example</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<link href="css/style.css" rel="stylesheet">
<!-- acme_one -->
</head>
<body ng-controller="testAppCtrl">
<ion-nav-bar class="nav-title-slide-ios7 bar-tusker" align-title="center">
<div class="buttons">
<button class="button button-icon icon ion-navicon" ng-click="openModal()"></button>
</div>
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view class="slide-left-right"></ion-nav-view>
<script id="home.html" type="text/ng-template">
<ion-view title="ACME Inc App">
<ion-content class="padding">
<p>Example of new mobile App content. Navigate to each area of the shiny new app.</p>
<p>
<button class="button icon icon-right ion-chevron-right" ui-sref="messages">go to messages</button>
</p>
</ion-content>
</ion-view>
</script>
<script id="messsages.html" type="text/ng-template">
<ion-view title="My messsages">
<ion-content class="padding">
<p>This is the messages page.</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#">new messages</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="settings.html" type="text/ng-template">
<ion-view title="Settings">
<ion-content class="padding">
<p>This is the settings content.</p>
</ion-content>
</ion-view>
</script>
<script id="info.html" type="text/ng-template">
<ion-view title="Useful information">
<ion-content class="padding">
<h3>Heading goes here.</h3>
<p>Blah blah blah.</p>
</ion-content>
</ion-view>
</script>
<script id="telephone.html" type="text/ng-template">
<ion-view title="Telephone">
<ion-content>
<p>This is a list of useful phone numbers ...... content to follow </p>
<p>wahoooo!!</p>
</ion-content>
</ion-view>
</script>
<script id="modal.html" type="text/ng-template">
<div id="mainAppNav" class="modal">
<div class="bar bar-header bar-tusker">
<button class="button button-icon icon ion-navicon" ng-click="closeModal()"></button>
<h1 class="title">ACME Inc App</h1>
</div>
<br></br>
<br></br>
<div class="list">
<ion-scroll direction="y" class="wide-as-needed">
<a class="item item-icon-left" href="#/home" ng-click="navLink()">
<i class="icon ion-ios7-home"></i>
Home
</a>
<a class="item item-icon-left item-icon-right" href="#/messages" ng-click="navLink()">
<i class="icon ion-email"></i>
My messages
<span class="badge badge-assertive">2</span>
</a>
<a class="item item-icon-left" href="#/info" ng-click="navLink()">
<i class="icon ion-information"></i>
Useful information
</a>
<a class="item item-icon-left" href="#/numbers" ng-click="navLink()">
<i class="icon ion-ios7-telephone"></i>
Telephone numbers
</a>
<a class="item item-icon-left" href="#/settings" ng-click="navLink()">
<i class="icon ion-ios7-gear"></i>
Settings
</a>
</ion-scroll>
</div>
</div>
</script>
<script src="lib/jquery.js"></script>
<script src="lib/fastclick.js"></script>
<script src="js/app.js" type="text/javascript" ></script>
<script src="cordova.js"></script>
</body>
</html>
app.js
var acme_app = angular.module('testApp', ['ionic']);
//nav menus
acme_app.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'
})
.state('messages', {
url: "/messages",
templateUrl: "messages.html"
// controller: 'messagesCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
})
.controller('testAppCtrl', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope,
animation: 'slide-right-left'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//new
$scope.navLink = function(){
// change view to linked
$scope.modal.hide();
}
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
});
Please help me understand where I’ve gone wrong.
I am wondering if I’m not listening to the correct clicks as they’re out of scope in the modal window.
I’m a bit of a newbie at writing Angular and Ionic and am trying to piece this together but need a little help just now.
Thanks in advance
Steve
