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.queryis undefined into your controller.Therefore
$scope.query.testis not working.Add this the your controller definition :
$scope.query={}