New to JS, Ionic framework, AngularJS. I'm trying to work with ng-show && ng-click to display the header on the event of a click on a button. I am still not getting the intended result, any ideas??
Here is my index:
<body ng-app="starter" ng-controller="HomeCtrl as home">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar ng-show="display('on')" class="bar-balanced">
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
My controller:
.controller('HomeCtrl', function($scope) {
$scope.display = function (x) {
if (x == 'on'){
return true;
}
else if (x == 'off'){
return false;
}
}
})
My view:
<ion-view ng-controller="HomeCtrl as home">
<ion-content class="splash">
</ion-content>
<ion-footer-bar class="bar-balanced">
<button ng-click="display('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in"href="#/login" >
</a>
</button>
</ion-footer-bar>
</ion-view>
If i have missed anything will edit post with updates**
I see a couple issues here, first of all both the navbar and footer-bar elements should be inside the ng-controller element. This will give the navbar access to the scope to determine if it should be shown or not.
Also, you should use a variable on the scope to determine if the navbar is shown, full example below.
var app = angular.module('myApp', []);
app.controller('HomeCtrl', function($scope) {
$scope.isNavVisible = false;
$scope.displayNav = function(x) {
if (x == 'on') {
$scope.isNavVisible = true;
} else if (x == 'off') {
$scope.isNavVisible = false;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="HomeCtrl">
<ion-nav-bar ng-show="isNavVisible" class="bar-balanced">
<span>Nav Content</span>
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
<ion-footer-bar class="bar-balanced">
<button ng-click="displayNav('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in" href="#/login">Login</a>
</button>
</ion-footer-bar>
</div>
</html>
If you need to manipulate the nav from multiple controllers you could do that with a service like so
var app = angular.module('myApp', []);
app.service('navService', function() {
this.isNavVisible = false;
});
app.controller('RootCtrl', ['$scope', 'navService',
function($scope, navService) {
$scope.navService = navService;
}
]);
app.controller('HomeCtrl', ['$scope', 'navService',
function($scope, navService) {
$scope.displayNav = function(x) {
if (x == 'on') {
navService.isNavVisible = true;
} else if (x == 'off') {
navService.isNavVisible = false;
}
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="RootCtrl">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar ng-show="navService.isNavVisible" class="bar-balanced">
<span>Nav Content</span>
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-view ng-controller="HomeCtrl">
<ion-content class="splash">
</ion-content>
<ion-footer-bar class="bar-balanced">
<button ng-click="displayNav('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in" href="#/login">
Login
</a>
</button>
</ion-footer-bar>
</ion-view>
</body>
You should use the ng-click directive to change a value like this:
.controller('HomeCtrl', function($scope) {
$scope.displayItem = false;
$scope.display = function (x) {
if (x == 'on'){
$scope.displayItem = true;
}
else if (x == 'off'){
$scope.displayItem = false;
}
}
})
And then inside your View:
<ion-nav-bar ng-show="displayItem" class="bar-balanced">
<ion-content>
<ion-nav-back-button class="bar-balanced">
</ion-nav-back-button>
</ion-content>
</ion-nav-bar>
Your View, will still the same
<ion-footer-bar class="bar-balanced" ng-controller="HomeCtrl as home">
<button ng-click="display('on')" class="button-large button-full button-clear">
<a class="button button-icon icon ion-log-in"href="#/login" >
</a>
</button>
</ion-footer-bar>
Make sure that both html refers to the same controller. Otherwise you will not have access to the $scope.displayItem property.
In case yo want to share data between different controllers, you should look for another alternative, like a Factory/service or property inside the $rootScope.
Related
i have a problem with my code , this code is about append a modal to element with specific id. so that when button clicked ,this modal popup will showed inside div element with id="forModal" (div element with this id is inside view.html) ,my app using angularjs that have base html(index.html) ,one template for route(view.html),one template for modal(modal.html).
index.html
<html>
<head>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--Ui Route-->
<script src="lib/ionic/js/angular-ui/angular-ui-router.min.js"> </script>
<!--UI Bootstrap-->
<script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0.min.js"></script>
<!--UI Bootstrap TPLS-->
<script src="lib/ionic/js/angular-ui/ui-bootstrap-2.5.0-tpls.min.js"></script>
<!--ngCoockies-->
<script src="js/angular-cookies.js"></script>
<!-- my app's js -->
<script src="js/app.js"></script>
<!--controller js-->
<script src="js/controller.js"></script>
</head>
<body ng-app="starter">
<ui-view></ui-view>
</body>
</html>
app.js
var moduleapp = angular.module('starter', ['ionic','ui.router','ngCookies','ui.bootstrap']);
moduleapp.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("dashboard",{
url:"/dashboard",
templateUrl:"templates/dashboard.html",
controller : "dashboardCtrl"
})
$stateProvider.state("dashboard.view",{
url : "/view",
templateUrl : "templates/view.html",
controller: "viewDataCtrl"
})
$urlRouterProvider.otherwise("/dashboard.view")
})
controller.js
moduleapp.controller('dashboardCtrl',[function(){
//some code
}])
moduleapp.controller('viewDataCtrl',['$document','$uibModal','$scope','$http','$cookies',function($document,$uibModal,$scope,$http,$cookies){
// reserve variable,declare it as object
$scope.dataColumn = {};
$scope.dataData = {};
// reserve variable for user authetication level
$scope.userLevel= $cookies.get('userLevel');
//function for finding available column
function caricolumn(){
$http.get('link for search column.php').success(function(hasil){
$scope.dataColumn = hasil;
});
}
//executing function when controller running
caricolumn();
//function for get data,return result to $scope.dataData as object
function caridata(){
$http.get('link for search data.php').success(function(hasil){
$scope.dataData = hasil;
})
}
//execute function when controller running
caridata();
//function for edit
$scope.edit = function(x){
var modalInstance = $uibModal.open({
templateUrl:'templates/modal.html',
controller:'viewDataCtrl',
//THIS IS THE PROBLEM ,appendTO doesnt work,still inject modal popup to body element
appendTo : angular.element(document.querySelector('#viewElement'))
});
}
//function for delete data
$scope.delete = function(x){
$http.post('link for deletedata.php',x).success(function(hasil){
alert(hasil);
//if output(php echo) same as string ,this condition considered as success
if(hasil == "Delete Success"){
caridata();
}
})
}
}]);
modal.html
<div class="modal-header">
<h3>Hayy</h3>
</div>
<div class="modal-body">
<p>this is Body</p>
</div>
<div class="modal-footer">
this is footer
</div>
dashboard.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<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>
<ui-view>
<!--This is where view.html injected-->
</ui-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list ><a ui-sref="dashboard.add">
<ion-item>Tambah Data</ion-item></a>
</ion-list>
<ion-list ><a ui-sref="dashboard.view">
<ion-item>Tampil Data</ion-item></a>
</ion-list>
<ion-list >
<a ng-click="logout()">
<ion-item>Log Out</ion-item>
</a>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
view.html
<div id="viewElement" class="container" style="margin-top:50px;">
<h2>Data-Data</h2>
<hr/>
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="dc in dataColumn">{{dc.KOLOM}}</th>
<th ng-if="userLevel == 'LV02' || userLevel == 'LV01'">Edit</th>
<th ng-if="userLevel == 'LV01'">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dd in dataData" id="dt{{dd.IDROW}}">
<td ng-repeat="ddd in dd.DATA">{{ddd}}</td>
<td ng-if="userLevel == 'LV01' || userLevel == 'LV01'"><button type="button" ng-click="edit({{dd.IDROW}})" class="btn btn-warning">Edit</button></td>
<td ng-if="userLevel == 'LV01'"><button type="button" ng-click="delete({{dd.IDROW}})" class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
as you can see ,when app running .route default will go to "dashboard.view"
dashboard state is code for left sidemenu ,then dashboard.view state for viewing data(view state in child from dashboard state)
what i want is when edit button clicked inside view.html(controller : viewDataCtrl,state : dashboard.view), modal popup will appear inside div element with id="forModal" (div element with this id is inside view.html)
but with this code ,modal popup always appear inside body tag element not inside div element with id="forModal".
how can i approach this condition ? thanks
I am not able to get the ng-click event to trigger when inside an item in a ionic modal that pops up. When I click on an item I see it turn gray so it seems like it is registering the click but I have a console.log statement as the first line in my joinGroup function and nothing is output to the console.
I also tried using the ion-list and ion-item elements but those didn't work either.
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-balanced">
<h1 class="title">Join Court</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Done</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<div class="item item-icon-right" ng-repeat="group in groups" ng-click="joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</div>
</div>
</ion-content>
</ion-modal-view>
var joinGroup = function (group) {
console.log("Call joinGroup");
try this
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-balanced">
<h1 class="title">Join Court</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Done</button>
</ion-header-bar>
<ion-content class="padding">
<ion-list ng-repeat="group in groups" >
<ion-item ng-click="joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-modal-view>
In your controller try to do with $scope when writing function like this.
$scope.groups = [];
$scope.joinGroup = function(){
//do your stuff here
}
I assume you did not connect your view with your controller correctly
either you have
.controller('myCtl', myCtl);
function myCtl($scope) {
$scope.groups = [];
$scope.joinGroup = function(args) {};
}
and your view
<div ng-controller="myCtl">
<ion-content class="padding">
<ion-list ng-repeat="group in groups" >
<ion-item ng-click="joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</ion-item>
</ion-list>
</ion-content>
</div>
or you can use this approach, which I prefer
.controller('myCtl', myCtl);
function myCtl() {
var vm = this;
vm.groups = [];
vm.joinGroup = function(args) {};
}
view
<div ng-controller="myCtl as vm">
<ion-content class="padding">
<ion-list ng-repeat="group in vm.groups" >
<ion-item ng-click="vm.joinGroup(group)">
<h2>{{group.name}}</h2>
<p>{{group.address}}</p>
</ion-item>
</ion-list>
</ion-content>
</div>
you need to define angular module and angular controller
and put the
app.controller('name',function($scope){
$scope.joinGroup = function(group){
console.log("Call joinGroup");
}
})
I am working on one ionic framework project.
Where am stuck of list not getting updated. Once menu item is clicked the list should be updated accordingly.
As both things are in different controller I don't have any idea how I can do scope.apply
Below is mine code.
Menu.html
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button class="button-clear button-icon ion-ios-arrow-back">
</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="mainContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Services</h1>
</ion-header-bar>
<ion-content>
<div class="list" ng-controller="serviceCtrl as vm">
<a menu-close class="item item-icon-right item-dark" ng-repeat="services in vm.menu" ng-click="vm.setService(services.id)">
{{services.name}}
<i class="icon ion-ios-arrow-right ion-accessory"></i>
</a>
</div>
<!-- </ion-content> -->
</ion-side-menu>
</ion-side-menus>
Menu services
angular.module('starter').controller('serviceCtrl', ['$state','serviceFactory','$scope','$rootScope', serviceCtrl]);
function serviceCtrl($state, serviceFactory,$scope,$rootScope) {
var vm = this;
var menu = serviceFactory.getService();
vm.menu = menu;
/* var data = serviceFactory.getService();
vm.menu = data.menu;*/
vm.setService = function(menuId){
//$scope.$apply(function() {
//alert('a');
serviceFactory.setService(menuId);
//$scope.subServiceId = menuId;
$state.go('app.sub');
setTimeout(function(){
alert('asdf')
$scope.$apply()
}, 300);
//});
};
};
LIst page that needs to be updated
<ion-view view-title="{{vm.menu[vm.subServiceId-1]['name']}}" ng-controller="subServiceCtrl as vm">
<ion-content>
<div class="list">
<a class="item item-icon-right" ng-repeat="services in lists" ng-click="vm.setSubService(services.sname)">
{{services.sname}}
<i class="icon ion-ios-arrow-right ion-accessory"></i>
</a>
</div>
</ion-content>
</ion-view>
And list controller
angular.module('starter').controller('subServiceCtrl',['$state','serviceFactory','$scope','$rootScope',subServiceCtrl]);
function subServiceCtrl($state,serviceFactory,$scope,$rootScope) {
var vm = this;
//get the sub services
var menu = serviceFactory.getService();
$scope.menua = menu;
var subServiceIda = serviceFactory.actSercice();
vm.subServiceId = serviceFactory.getSelected();
$rootScope.lists = menu[subServiceIda-1].subItems;
alert('as check');
console.log(vm.subServiceId);
alert("First level menu id is "+vm.subServiceId);
vm.menuId = serviceFactory.setFirstId();
//to get the selected sub item. second call to setService()
//$scope.$apply();
if(!$scope.$$phase) $scope.$apply()
vm.setSubService = function(subname) {
serviceFactory.setService(subname);
$state.go('app.next');
//$scope.$apply();
};
};
Ok I ownself solved it.
Just added
cache: false,
in RouterProvider.
CODE
http://codepen.io/hawkphil/pen/LEBNVB
I have two pages (link1 and link2) from the side menu. Each page has 2 tabs:
link1: tab 1.1 and tab 1.2
link2: tab 2.1 and tab 2.2
I am using ion-tabs for each page to contain the 2 tabs.
This is a very simple design: I want to click on the link1 or link2 to go to appropriate route. But for some reason, the state has changed correctly (see Console) but the actual html template did not get updated. Can you find out what's wrong and how to fix?
There seems to be some caching problem or something.
HTML
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<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-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</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-balanced">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close ui-sref="link1">
Link 1
</ion-item>
<ion-item nav-clear menu-close ui-sref="link2">
Link 2
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<ion-header-bar class="bar-calm">
<h1 class="title">Right Menu</h1>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
<div class="list">
<a class="item item-avatar" href="#">
<img src="img/avatar1.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-side-menus>
<script id="link1.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 1.1</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 1.2</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
<script id="link2.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 2.1</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 2.2</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('link1', {
url: "/link1",
views: {
'menuContent': {
templateUrl: "link1.html"
}
}
})
.state('link2', {
url: "/link2",
views: {
'menuContent': {
templateUrl: "link2.html"
}
}
});
$urlRouterProvider.otherwise("/link1");
})
.controller('AppCtrl', ['$scope', '$rootScope', '$state', '$stateParams', function($scope, $rootScope, $state, $stateParams) {
$rootScope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) {
console.log(toState);
});
}])
You are currently referring to the latest release which is 1.0.0-rc.0 which has bug while transition from one state to another it is not loading the view.
Further research found that, they had 14 beta releases from version 1.0.0-beta.1 to 1.0.0-beta.14 after they are now on version 1.0.0-rc.0 which is release candidate.
nav-view is working perfect till 1.0.0-beta.13 version but it stop working after 1.0.0-beta.14(which is last beta release),
I would suggest you to degrade your version to 1.0.0-beta.13, I know depending on beta version is not good thing but still until ionic release stable version you have to rely on it.
Working Codepen with 1.0.0-beta.13
Update:
Your problem is your view are getting cached because by default caching is enabled inside your ionic app.
Straight from Ionic Doc (Latest Release doc 1.0.0-beta.14)
By default, views are cached to improve performance. When a view is
navigated away from, its element is left in the DOM, and its scope is
disconnected from the $watch cycle. When navigating to a view that is
already cached, its scope is then reconnected, and the existing
element that was left in the DOM becomes the active view. This also
allows for the scroll position of previous views to be maintained.Maximum capacity of caching view is 10.
So by mentioning cache: false on $stateProvider states function or disabling cache of nav-view globally by doing $ionicConfigProvider.views.maxCache(0); inside angular config phase.
So in your case this is what exact problem, your 1st view is getting cache & showing it again & again
There are 3 ways to solve this issue
1. Disable cache globally
Disable all caching by setting it to 0, before using it add $ionicConfigProvider dependency.
$ionicConfigProvider.views.maxCache(0);
Codepen
2. Disable cache within state provider
$stateProvider
.state('link1', {
url: "/link1",
cache: false,
views: {
'menuContent': {
templateUrl: "link1.html"
}
}
})
.state('link2', {
url: "/link2",
cache: false,
views: {
'menuContent': {
templateUrl: "link2.html"
}
}
});
Codepen
3. Disable cache with an attribute
<ion-tab title="Home" icon="ion-home">
<ion-view cache-view="false" view-title="Home">
<!-- Ion content here -->
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view cache-view="false" view-title="Home">
<!-- Ion content here -->
</ion-view>
</ion-tab>
Codepen
I believe the updated approach would be great to implement. Thanks.
Github issue for the same issue link here
I have this html
<body ng-controller="AppCtrl">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
</ion-nav-buttons>
<ion-nav-view animation="slide-left-right" name="main-view">
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<div class="list">
<a menu-close href="#" class="item item-icon-left">
<i class="icon ion-home">
</i>
Home
</a>
<a menu-close href="#/product" class="item item-icon-left">
<i class="icon ion-home">
</i>
products
</a>
<a menu-close href="#/category" class="item item-icon-left">
<i class="icon ion-home">
</i>
Category
</a>
</div>
</ion-side-menu>
</ion-side-menus>
<script id="product.html" type="text/ng-template">
<ion-view title="products">
<ion-content>
<div class="list">
<a class="item" href="#/product-form?id={{item.id}}" ng-repeat="item in items | filter:{nome: searchText}">
{
{item.nome}
}
<span class="item-note">
{
{item.quantidade}
}
</span>
</a>
</div>
</ion-content>
<div class="tabs tabs-icon-top">
<a class="tab-item" href="#/product-form">
<i class="icon ion-home"></i>
Adicionar
</a>
<a class="tab-item" ng-click="openModal()">
<i class="icon ion-search"></i>
Filtrar
</a>
</div>
</ion-view>
</div>
</script>
<script id="search.html" type="text/ng-template">
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="busca" ng-model="searchText">
</label>
<button class="button button-clear" ng-click="closeModal()">
cancelar
</button>
</div>
</script>
</body>
And with this controller
angular.module('ionicApp.controllers', ['ionicApp.config', 'xc.indexedDB'])
.controller('ProductController',
function ($scope, $ionicPopup, $timeout,
$ionicModal, $indexedDB, $window, $ionicModal) {
$scope.safeApply = function (fn) {
var phase = this.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
if (fn && (typeof (fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
var OBJECT_STORE_NAME = constants.productStore;
$scope.items = [];
$scope.searchText = "";
$scope.getAll = function () {
var myObjectStore = $indexedDB.objectStore(OBJECT_STORE_NAME);
myObjectStore.getAll().then(function (results) {
// Update scope
$scope.safeApply(function () {
$scope.items = results;
});
});
};
$scope.getAll();
$ionicModal.fromTemplateUrl('search.html', {
scope: $scope,
animation: 'slide-left-right'
}).then(function (modal) {
$scope.modal = modal;
});
$scope.closeModal = function () {
alert($scope.searchText);
$scope.modal.hide();
};
$scope.openModal = function () {
//$scope.searchText = "a";
$scope.getAll();
$scope.modal.show();
};
$scope.closeModal = function () {
alert($scope.searchText);
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function () {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function () {
// Execute action
});
})
Edit
Here is where i define the ProductController
var app = angular.module('ionicApp', ['ionic', 'ionicApp.controllers']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: "/",
views: {
'main-view': {
templateUrl: "home.html",
controller: "AppCtrl"
}
}
})
.state('product', {
url: "/product",
views: {
'main-view': {
templateUrl: "product.html",
controller: 'ProductController'
}
}
});
$urlRouterProvider.otherwise("/");
});
My problem is the searchText model isn't updating when the value changes. I tried $watch, ng-options.
I can put a initial value to the $scope.searchText on openModal method, but after inputed values don't update the model value, because of this my list isn't filtered.
Anyone could help me?
Thanks.
Edit 2
I solved the problem adding the search text into the modal.
$scope.modal = modal;
$scope.modal.searchText = "";
And i changed the attribute to the new variable.
<input type="search" placeholder="busca" ng-model="modal.searchText">
Thanks for the support.
Two-way binding works best with a nested object. Change your bindings to use something like this
$scope.data = {};
$scope.data.items = [];
The template for the modal is still being requested before the modal is in scope. That's probably the reason