I need to open a new page when an item is touched but I'm not able to make it work and I have no idea why.
This is my 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">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="ClientsCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Elenco Clienti</h1>
</ion-header-bar>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Cerca" ng-model="query[queryBy]">
</label>
<ion-list>
<ion-item ng-repeat="client in clients | filter:query" href="#/app/clients/{{ client.name }}">
<!-- <div class="row" on-hold="showActionsheet(client)"> -->
{{ client.name }}
<!-- </div> -->
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
<div class="bar bar-footer bar-positive">
<div class="title">
<button class="button button-icon" ng-click="newClient()">
Aggiungi cliente <i class="icon ion-compose"></i>
</button>
</div>
</div>
<script id="new-client.html" type="text/ng-template">
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">Nuovo Cliente</h1>
<button class="button button-clear button-positive" ng-click="closeNewClient()">Annulla</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="createClient(client)">
<div class="list">
<label class="item item-input">
<span class="input-label">Nome:</span>
<input type="text" ng-model="client.name">
</label>
<label class="item item-input">
<span class="input-label">Numero:</span>
<input type="tel" ng-model="client.phone">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Inserisci cliente</button>
</div>
</form>
</ion-content>
</div>
</script>
</body>
</html>
this is my app.js
// Clients App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
/* Costruttore */
.factory('Clients', function(){
return{
all: function(){
//Recupero tutti i clienti
var clientsString = window.localStorage['clients'];
//Se ci sono dati
if( clientsString ){
//Restituisco i dati
return angular.fromJson(clientsString);
}
//Non c'è nulla
return [];
},
save: function(clients){
window.localStorage['clients'] = angular.toJson(clients);
},
}
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app.single', {
url: "/clients/:clientName",
views: {
'menuContent' :{
templateUrl: "templates/client.html",
controller: 'SingleCtrl'
}
}
});
})
.controller('ClientsCtrl', function($scope, $ionicModal, Clients, $ionicActionSheet){
$scope.query = {}
$scope.queryBy = 'name'
// Load or initialize projects
$scope.clients = Clients.all();
$scope.orderProp="name";
// Create and load the Modal
$ionicModal.fromTemplateUrl('new-client.html', function(modal) {
$scope.clientModal = modal;
},
{
scope: $scope,
animation: 'slide-in-up'
}
);
// Called when the form is submitted
$scope.createClient = function(client) {
$scope.clients.push({
name: client.name,
phone: client.phone,
data: new Date()
});
$scope.clientModal.hide();
client.name = "";
client.phone = "";
Clients.save($scope.clients);
};
// Open our new task modal
$scope.newClient = function() {
$scope.clientModal.show();
};
$scope.closeNewClient = function() {
$scope.clientModal.hide();
};
$scope.showActionsheet = function(client){
$ionicActionSheet.show({
titleText: 'Azioni',
buttons: [
{ text: 'Cancella selezionato' },
],
destructiveText: 'Cancella tutto <i class="icon ion-trash-a"></i>',
cancelText: 'Annulla',
buttonClicked: function(index) {
if( index == 0 )
{
//E' una delete
$scope.clients.splice( $scope.clients.indexOf(bet), 1 );
Clients.save($scope.clients);
}
return true;
},
//Cancella tutto
destructiveButtonClicked: function() {
//Libero L'array
$scope.clients = [];
Clients.save($scope.clients);
return true;
}
});
};
})
.controller('SingleCtrl', function($scope, $stateParams) {
})
everything works great except the ion-item click:
<ion-item ng-repeat="client in clients | filter:query" href="#/app/clients/{{ client.name }}">
<!-- <div class="row" on-hold="showActionsheet(client)"> -->
{{ client.name }}
<!-- </div> -->
</ion-item>
when I click on it I'd like to show a new page with the client info, what's wrong with my code?
Here a codepen:http://codepen.io/anon/pen/ElAIz
Instead href you should use ui-sref from ui.router.
Example:
ui-sref="app.clients({clientName:client.name})"
Related
I'm trying to use ionic material theme in a app trying to build using ionic framework. I installed ionic-material and robotidraft using bower. added the scripts also.. but in next step they asked to inject these into the app..
how to Inject Ionic & Ionic Material into Ionic App?
where should I add this?
var app = angular.module('YOUR_APP_NAME', ['ionic', 'ionic-material']);
You can use ionic material with ionic as below ,
angular.module('ionicApp', ['ionic', 'ionic-material'])
Make sure you have refered the libraries
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.js"></script>
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.css" rel="stylesheet">
DEMO
/*global angular*/
angular.module('ionicApp', ['ionic', 'ionic-material'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: '/event',
abstract: true,
templateUrl: 'templates/event-menu.html'
})
.state('eventmenu.home', {
url: '/home',
views: {
'menuContent' :{
templateUrl: 'templates/home.html'
}
}
})
.state('eventmenu.checkin', {
url: '/check-in',
views: {
'menuContent' :{
templateUrl: 'templates/check-in.html',
controller: 'CheckinCtrl'
}
}
})
.state('eventmenu.attendees', {
url: '/attendees',
views: {
'menuContent' :{
templateUrl: 'templates/attendees.html',
controller: 'AttendeesCtrl'
}
}
});
$urlRouterProvider.otherwise('/event/home');
})
.controller('MainCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $ionicSideMenuDelegate, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
$scope.attendees = [
{ firstname: 'Nicolas', lastname: 'Cage' },
{ firstname: 'Jean-Claude', lastname: 'Van Damme' },
{ firstname: 'Keanu', lastname: 'Reeves' },
{ firstname: 'Steven', lastname: 'Seagal' }
];
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('CheckinCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
$scope.showForm = true;
$scope.shirtSizes = [
{ text: 'Large', value: 'L' },
{ text: 'Medium', value: 'M' },
{ text: 'Small', value: 'S' }
];
$scope.attendee = {};
$scope.submit = function() {
if(!$scope.attendee.firstname) {
/*jshint ignore:start*/
alert('Info required');
/*jshint ignore:end*/
return;
}
$scope.showForm = false;
$scope.attendees.push($scope.attendee);
};
})
.controller('AttendeesCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
$scope.activity = [];
$scope.arrivedChange = function(attendee) {
var msg = attendee.firstname + ' ' + attendee.lastname;
msg += (!attendee.arrived ? ' has arrived, ' : ' just left, ');
msg += new Date().getMilliseconds();
$scope.activity.push(msg);
if($scope.activity.length > 3) {
$scope.activity.splice(0, 1);
}
};
});
/*endglobal angular*/
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>INSERT YOUR PROBLEM NAME HERE</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.js"></script>
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<ion-nav-view></ion-nav-view>
<script id="templates/event-menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list animate-rip">
<!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
<a href="#/event/check-in" class="item" menu-close>Check-in</a>
<a href="#/event/attendees" class="item" menu-close>Attendees</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Welcome" ng-cont>
<ion-content class="padding">
<p>Swipe to the right to reveal the left menu.</p>
<p>(On desktop click and drag from left to right)</p>
</ion-content>
</ion-view>
</script>
<script id="templates/check-in.html" type="text/ng-template">
<ion-view view-title="Event Check-in">
<ion-content>
<form class="list animate-ripple" ng-show="showForm">
<div class="item item-divider">
Attendee Info
</div>
<label class="item item-input">
<input type="text" placeholder="First Name" ng-model="attendee.firstname">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name" ng-model="attendee.lastname">
</label>
<div class="item item-divider">
Shirt Size
</div>
<ion-radio ng-repeat="shirtSize in shirtSizes"
ng-value="shirtSize.value"
ng-model="attendee.shirtSize">
{{ shirtSize.text }}
</ion-radio>
<div class="item item-divider">
Lunch
</div>
<ion-toggle ng-model="attendee.vegetarian">
Vegetarian
</ion-toggle>
<div class="padding">
<button class="button button-block" ng-click="submit()">Checkin</button>
</div>
</form>
<div ng-hide="showForm">
<pre ng-bind="attendee | json"></pre>
View attendees
</div>
</ion-content>
</ion-view>
</script>
<script id="templates/attendees.html" type="text/ng-template">
<ion-view view-title="Event Attendees">
<ion-content>
<div class="list animate-rip">
<ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
ng-model="attendee.arrived"
ng-change="arrivedChange(attendee)">
{{ attendee.firstname }}
{{ attendee.lastname }}
</ion-toggle>
<div class="item item-divider">
Activity
</div>
<div class="item" ng-repeat="msg in activity">
{{ msg }}
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
Here is my controller:
$scope.professionList = [];
$scope.searchText = '';
$scope.$on('$ionicView.enter', function() {
PeopleSearchService.setSearchParams(undefined);
})
$scope.$on('$ionicView.loaded', function() {
$scope.professionList = Constants.professionList();
})
I have this simple html
<div class="bar bar-header item-input-inset bg-white" ng-if="showSearchBox">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="searchText">
</label>
<button class="button button-icon icon ion-ios-close-empty" ng-click="toggleSearchBox()"></button>
</div>
<div class="list">
<a class="item item-icon-right" ng-repeat="(id, profession) in professionList | filter:searchText" ui-sref="app.search-people({'professionId': profession.id})">{{profession.name}}<i class="icon ion-ios-arrow-right"></i></a>
</div>
Inside controller i have
$scope.searchText = '';
Typing anything in text box not filtering the list.
Here searchText input present inside ng-if="showSearchBox", which is why it put searchText scope variable inside childScope of ng-if element(ng-if/ng-repeat does create prototypically inherited child scope).
To avoid such kind of issues, always do follow Dot Rule while defining model's or controllerAs pattern to avoid scoping related issue.
Dot Rule
<div class="bar bar-header item-input-inset bg-white" ng-if="showSearchBox">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="model.searchText">
</label>
<button class="button button-icon icon ion-ios-close-empty" ng-click="toggleSearchBox()"></button>
</div>
<div class="list">
<a class="item item-icon-right" ng-repeat="(id, profession) in professionList | filter: model.searchText" ui-sref="app.search-people({'professionId': profession.id})">{{profession.name}}<i class="icon ion-ios-arrow-right"></i></a>
</div>
Similar answer
How about something like that
angular.module('ionicApp', ['ionic', 'sampleController'])
angular.module('sampleController', [])
.controller('sampleController', function($scope, $ionicScrollDelegate) {
$scope.sampleData = [{
'id': '1',
'profession': 'Teacher'
}, {
'id': '2',
'profession': 'Software Developer'
}, {
'id': '3',
'profession': 'Graphic Designer'
}];
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/0.9.22/css/ionic.css" rel="stylesheet">
<script src="https://code.ionicframework.com/0.9.22/js/ionic.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/angular/angular.min.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/angular/angular-animate.min.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/angular/angular-sanitize.min.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/angular-ui/angular-ui-router.min.js"></script>
<script src="https://code.ionicframework.com/0.9.22/js/ionic-angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="sampleController">
<header-bar title="'Filtering'" type="bar-positive"></header-bar>
<content has-header="true" padding="true" scroll="false">
<div style="height:250px">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="searchText">
</label>
<scroll direction="y">
<ul class="list">
<li ng-repeat="data in sampleData | filter:searchText">{{data.profession}}</li>
</ul>
</scroll>
</div>
</content>
</body>
</html>
I am trying to implement oauth service in angular 1.4.8. I am getting an error in console like this:
Uncaught Error:
http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=angularoauthexample…udflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.8%2Fangular.min.js%3A19%3A463)(anonymous function) # angular.js:38(anonymous function) # angular.js:4458n # angular.js:340g # angular.js:4419eb # angular.js:4344c # angular.js:1676yc # angular.js:1697Zd # angular.js:1591(anonymous function) # angular.js:29013j # jquery.js:3148k.fireWith # jquery.js:3260m.extend.ready # jquery.js:3472J # jquery.js:3503
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!--font-awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--Bootstrap social-->
<link rel="stylesheet" href="css/bootstrap-social.css">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="angularoauthexampleApp">
<div id="wrap">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand em-text" href="#"><i class="fa fa-user-plus fa-1x" style="color:whitesmoke"></i></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Already have an account?</p></li>
<li class="dropdown">
<b>Login</b> <span class="caret"></span>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<i class="fa fa-facebook"></i> Facebook
<!--<button class="btn btn-primary" ng-click="login()"><i class="fa fa-google" ng-click="login()"></i> Google</button>-->
<i class="fa fa-google" ng-click="login()"></i> Google
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right">Forget the password ?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <b>Join Us</b>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Bootstrap core JavaScript + Angular Js
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
</html>
Angular code:
App.js:
'use strict';
angular
.module('angularoauthexampleApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/afterlogin', {
templateUrl: 'views/afterlogin.html',
controller: 'AboutCtrl'
})
.when('/access_token=:accessToken', {
template: '',
controller: function ($location,$rootScope) {
var hash = $location.path().substr(1);
var splitted = hash.split('&');
var params = {};
for (var i = 0; i < splitted.length; i++) {
var param = splitted[i].split('=');
var key = param[0];
var value = param[1];
params[key] = value;
$rootScope.accesstoken=params;
}
$location.path("/afterlogin");
}
})
.otherwise({
redirectTo: '/'
});
});
Main.js
angular.module('angularoauthexampleApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$scope.login=function() {
var client_id="343625411797-hcm0impil8l1mughb8ma2jj966um05bp.apps.googleusercontent.com";
var scope="email";
var redirect_uri="http://localhost:9046/RTH_Sample4/app/";
var response_type="token";
var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+
"&response_type="+response_type;
window.location.replace(url);
};
});
About.js
angular.module('angularoauthexampleApp')
.controller('AboutCtrl', function ($scope,$rootScope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$scope.root=$rootScope;
});
I tried searching online for a fix but nothing worked so far.
How do I fix this?
I think you have an error defining your controllers.
Instead of this:
angular.module('angularoauthexampleApp')
.controller('MainCtrl', function ($scope) {
// controller content
});
try this instead:
angular.module('angularoauthexampleApp')
.controller('MainCtrl', ['$scope', function ($scope) {
// controller content
}]);
See documentation: https://docs.angularjs.org/guide/controller
So, I have a code pen link here: http://codepen.io/anon/pen/oXwZmr
In that, they combined all the templates in index.html (tabs.html, mainContainer.html, entry.html, ...) and all controllers of template pages in js file(MainController, TabsPageController, ...).
I wanted to keep all things separate, so i did like index.html, mainController.html mainController.js, tabs.html, tabs.js, app.js.
The codepen works perfectly. But I am getting problem. My Content is going behind tabs.
index.html
<html ng-app="DroidRestClient">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Droid Rest Client</title>
<!-- <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionicons.css" rel="stylesheet" type="text/css"/>
<!--ionic/angularjs js-->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="templates/mainContainer/mainContainer.js" type="text/javascript"></script>
<script src="templates/tabs/tabs.js" type="text/javascript"></script>
</head>
<body>
<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view>
</ion-nav-view>
</body>
</html>
app.js
angular.module('DroidRestClient', ['ionic', 'DroidRestClient.mainController', 'DroidRestClient.tabsPageController'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url : '/main',
templateUrl : 'templates/mainContainer/mainContainer.html',
abstract : true,
controller : 'MainController'
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs/tabs.html',
controller : 'TabsPageController'
}
}
});
$urlRouterProvider.otherwise('/main/tabs');
}]);
mainContainer.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"
animation="nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="main">
</ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Settings</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
mainContainer
angular.module('DroidRestClient.mainController', ['ionic'])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
};
}]);
tabs.html
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Request" icon-off="ion-ios-cloud-upload-outline" icon-on="ion-ios-cloud-upload">
<ion-content has-header="true" padding="true">
<form ng-submit="doLogin()">
<div class="list">
<div class="item item-divider item-button-right">
Url
</div>
<label class="item item-input">
<input type="text" placeholder="enter url">
</label>
<div class="item item-divider item-button-right">
Method
</div>
<label class="item item-input">
<div class="input-label">
Method
</div>
<select>
<option selected>GET</option>
<option>POST</option>
<option>PUT</option>
<option>DELETE</option>
</select>
</label>
<div class="item item-divider item-button-right">
Parameters
<a class="button button-icon icon ion-ios-plus-empty"></a>
<button class="button button-positive">
<i class="icon ion-ios-plus-empty"></i>
</button>
</div>
<div class="list list-inset">
<div class="item">
No parameters
</div>
</div>
<div class="item item-divider item-button-right">
Headers
<a class="button button-icon icon ion-ios-plus-empty"></a>
<button class="button button-positive">
<i class="icon ion-ios-plus-empty"></i>
</button>
</div>
<div class="list list-inset">
<div class="item">
No headers
</div>
</div>
<div class="item item-divider item-button-right">
Body
</div>
<label class="item item-input">
<textarea placeholder="enter body"></textarea>
</label>
</div>
</form>
</ion-content>
</ion-tab>
<ion-tab title="Response" icon-off="ion-ios-cloud-download-outline" icon-on="ion-ios-cloud-download">
<ion-content has-header="true" padding="true">
<h2>Response</h2>
</ion-content>
</ion-tab>
</ion-tabs>
tabs.js
angular.module('DroidRestClient.tabsPageController', ['ionic'])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}]);
Give class="has-header" to ion-content.
<ion-content class="has-header">
</ion-content>
And you need to initialise your angular app - See javascript on my example. Note ng-controller and ng-app.
Add has-header="true" in tabs.html
in example; <ion-view title="{{navTitle}}" has-header="true" left-buttons="leftButtons">
I was also facing the same issue and it worked for me.
I've got the following code
Check on codepen
<html ng-app="optik">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menu query replication</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<body ng-controller='ContentController'>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar bar-header bar-positive">
<button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
<div class="h1 title"> Ionic Optik! </div>
<button class="button button-icon icon ion-more" ng-click="console.log('clickie')"></button>
</ion-header-bar>
<ion-content has-header="true">
<input type="text" placeholder="Nombre" ng-model="query.test" />
<h3> Hola {{query.test}}</h3>
<!--
<ion-list>
<ion-item ng-repeat="cliente in clientes">
{{cliente.nombre}}
</ion-item>
</ion-list>
-->
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left" expose-aside-when="large">
<ion-header-bar class="bar bar-header bar-stable">
<div class="h2 title"> Busqueda </div>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<label class="item item-input">
<input type="text" placeholder="Nombre" ng-model="query.nombre" />
</label>
<label class="item item-input">
<input type="text" placeholder="Ciudad" />
</label>
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="meses" min="0" max="12" />
<i class="icon ion-volume-high"></i>
</div>
</ul>
<h3>{{query.nombre}}<h3>
<h3>Hola {{query.test}}</h3>
<h3>{{texto}}</h3>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
Js file
angular.module('optik', ['ionic']);
angular
.module('optik')
.controller('ContentController', ContentController);
ContentController.$inject = ['$scope', '$ionicSideMenuDelegate'];
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.texto = "Hola mundo!";
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
It includes a text input inside side view with ng-model='query.nombre'. It updates a {{query.nombre }} inside the sidenav but not one on the Right pane. Any idea what the issue might be?
Your problem is that $scope.query is undefined into your controller.
Therefore $scope.query.test is not working.
Add this the your controller definition : $scope.query={}
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.texto = "Hola mundo!";
$scope.query={}
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}