Develop Reference

Why an ionic modal freezes the UI when it is closed or submitted?

I have a popover which two options -Add Favorite and Add Comment-, the first options is working correctly: it does not freeze the user interface; but the second one once the form is omitted or submitted freezes the interface. This is what is happening:
Note how when I close the form the interface does not respond.
This is the code I have used to create the popover and and modal:
$ionicPopover.fromTemplateUrl('templates/dish-detail-popover.html',{
scope: $scope})
.then(function(popover){
$scope.popover = popover;
});
$scope.openPopover = function($event){
$scope.popover.show($event);
}
$scope.closePopover = function() {
$scope.popover.hide();
};
$ionicModal.fromTemplateUrl('templates/dish-comment.html', {
scope: $scope
}).then(function(modal) {
$scope.commentModal = modal;
});
// Triggered in the reserve modal to close it
$scope.closeAddComment = function() {
$scope.commentModal.hide();
};
// Open the reserve modal
$scope.showCommentModal = function($event) {
$scope.closePopover();
$scope.commentModal.show($event);
};
The template for dish-detail-popover.html:
<ion-popover-view>
<ion-content>
<div class="list">
<a class="item" ng-click="addFavorite(dish.id)">
Add to favorites
</a>
<a class="item" ng-click="showCommentModal()">
Add Comment
</a>
</div>
</ion-content>
</ion-popover-view>
and the template for dish-comment.html:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Submit Comment on Dish</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeAddComment()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form id="comentDishForm" name="comentDishForm" ng-submit="doComment()">
<div class="list">
<label class="item item-input item-select">
<span class="input-label">Rating</span>
<select ng-model="comment.rating">
<option ng-repeat="n in [1,2,3,4,5]" value="{{n}}">{{n}}</option>
</select>
</label>
<label class="item item-input">
<span class="input-label">Your Name</span>
<input type="text" ng-model="comment.author">
</label>
<label class="item item-input">
<span class="input-label">Your Comment</span>
<input type="text" ng-model="comment.comment">
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Submit</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
NOTE: When the form is called from the Add Comment button (the green one), it works correctly. The failure is related when it called from the popover.
Some suggestions, or ideas,... to solve this?

The screen gets freezed because despite closing the popover before opening the modal, the body tag remains dirty with the class 'popover-open'. A quick solution, but not the neatest, is to close the popover again when closing the modal. This way, ionic framework will remove the class 'popover-open' from the body tag. Example:
$scope.$on('modal.hidden', function() {
$scope.closePopover();
});
Hope it helps.

I also ran into the same issue and had no idea why this was happening. Reading the Ionic docs about ionicPopover, I found that the .hide() method is actually returning a promise which will resolve once the popover is animated out. So, what you can actually do is setup your closePopover() method as follows:
$scope.closePopover = function () {
return $scope.popover.hide();
};
As for the method to be executed when someone clicks the "Add Comment" option, you can implement that as follows:
$scope.addComment = function addComment() {
$scope.closePopover()
.then(function() {
$scope.openAddCommentModal();
});
};
This will ensure that the modal is only shown once the popover is completely animated out and those classes are removed from the body tag. This will clear the dirty states and make the app respond.

ng-change and ng-click not triggering events in controller

I'm trying to create a radio type button selection in AngularJS. Here is my code.
HTML code:
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<h3 class="page-header">Create Products</h3>
<div class="media-list" data-toggle="buttons">
<label class="btn btn-default col-md-2 custom-thumbnail">
<input type="radio" ng-model="platformSel" ng-change="tileSelect(value)" value="win" name="platform-selection" id="win-tile" >
<i class="center-block fa fa-windows fa-5x"></i>
<span class="text-center">Windows</span>
</label>
<label class="btn btn-default col-md-offset-custom col-md-2 custom-thumbnail">
<input type="radio" ng-model="platformSel" ng-change="tileSelect(value)" value="mac" name="platform-selection" id="mac-tile">
<i class="center-block fa fa-apple fa-5x"></i>
<span class="text-center">MAC</span>
</label>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
Controller code:
(function() {
'use strict';
function config($routeProvider) {
$routeProvider
.when('/createProduct', {
templateUrl: 'app/components/createProduct/createProductView.html',
controller: 'createProductCtrlr'
});
}
function createProductCtrlr($scope, $rootScope, $location) {
$scope.platformSel = '';
$scope.tileSelect = function(target) {
console.log(target + " selected");
};
}
angular
.module('pacman')
.controller('createProductCtrlr', ['$scope', '$rootScope', '$location', createProductCtrlr])
.config(['$routeProvider', config]);
})();
I don't see any call happening in 'tileSelect' function. I have no clue why.
Any help is appreciated. I'm new to Angular JS.

Is there any error in JavaScript console? As mentioned before you are missing ng-app and ng-controller directives.
<div id="page-wrapper" ng-app="pacman" ng-controller="createProductCtrlr">
The rest of the code almost correct but since you bind the radio to a model variable there is no need for passing argument in ng-change function.
$scope.tileSelect = function() {
console.log($scope.platformSel + " selected");
};
Check this fiddle

Debugging and fixing stuff is real hard. Not as simple as writing code from scratch.
The reason being is, 'data-toggle=buttons' just toggles the bootstrap UI and doesnt make any function calls. Remove the line from html line where class="media-list" and it works.
Answer:
data-toggle="buttons" just toggles the twin button group. Doesnt allow to make function calls.

Dynamic list for Ionic App using Angular JS in two views

I have a Ionic app with Angular JS. I have a Dynamic checkbox list which is called from an array in app.js. I have it so that when a user clicks on a checkbox, the list above gets updated with their choice, what I want is for the choice to get put into another view not another div i.e tab 1 = List, tab - 2 = choices. The code is:
$scope.myList = [
{name:'Choice one'},
{name:'Choice two)'}
];
$scope.myChoices = [];
$scope.stateChanged = function(checked,indx){
var item = $scope.myList[indx];
if(checked){
$scope.myChoices.push(item);
}else{
var index = $scope.myChoices.indexOf(item);
$scope.myChoices.splice(index,1);
}
}
html:
<div>
<div class="item item-dark item-icon-right">
My Choices
</div>
<ul class="list" >
<li class="item" ng-repeat='item in myChoices'>
<p>{{item.name}}</p>
</li>
</ul>
<div class="item item-dark item-icon-right">
University list
</div>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="search">
</label>
<button class="button ion-close-circled input-button button-small"
ng-click="search = ''" ng-show="search.length">
Clear search
</button>
</div>
<ul class="list" >
<li class="item item-checkbox" ng-repeat='item in myList | filter: search'>
<label class="checkbox">
<input type="checkbox" ng-model="checked" ng-change='stateChanged(checked,$index)'>
</label>
<p>{{item.name}}</p>
</li>
</ul>
</div>
Tabs:
<ion-tabs class="tabs-icon-top tabs-dark">
<ion-tab title ="List" icon-on="home" icon-off="home" href="#/tab/list">
<ion-nav-view name="list-tab"></ion-nav-view></ion-tab>
<ion-tab title ="My choices" icon-on="choices" icon-off="choices" href="#/tab/choice">
<ion-nav-view name="choice-tab"></ion-nav-view></ion-tab>
</ion-tabs>

When you are trying to send data across multiple views, the easiest way is to store the data in a factory variable. Whenever you need the data, you can get it from the factory with a simple get.
// This module can be in its own javascript file
angular.module('choicesFactory', [])
.factory('choicesFactory', function() {
var choicesStored = [];
return {
storeChoices: function(choices) {
choicesStored = choices;
return;
},
getChoices: function() {
return choicesStored;
},
};
});
Now, to implement this bit of code, all you have to do is include the javascript file after your inclusion of angularjs in your index.html and add choicesFactory to your app dependencies.
When you call the function from your controller, you can say:
.controller('choicesController', [
'$scope',
'$state',
'choicesFactory'
function($scope, $state, choicesFactory) {
// An example with getting the choices
var choices = choicesFactory.getChoices()
}]);
If this doesn't quite make sense, I made a codepen example app that demonstrates all the pieces working together.
Click here to check out the example. :) Happy coding

angularjs $scope.watch text field error?

i have used local storage to filter listpage .i have text box with clear button
when i clear button its not working becoze of that $scope.watch.if i enter values in text box also $scope.watch is not allowed the values how to avoid this error when i click clear button.when i clear or ng-model changes i need to pick current value based on that value list should come
.controller('ListingCtrl', [
'$scope', '$http', '$location', '$window', '$filter','$ionicPopover','$ionicLoading',
function($scope, $http, $location, $window, $filter, $ionicPopover, $ionicLoading) {
$scope.$watch(function() {
var searchstore =window.localStorage.getItem("searchstore");
console.log(searchstore);
$scope.query=searchstore;
})
$scope.clearSearch = function()
{
$scope.query = '';
};
$http.get('*****').success(function(data,dealers,response)
{
$scope.dealers = data;
});
}])
<!-- begin snippet: js hide: false -->
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper" >
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="query" >
</label>
<button class="button button-icon ion-ios-close-outline" ng-click="clearSearch()" id="iconcolor" >clear</button>
</div>
<div class="list card" data-ng-init="nearme()" data-ng-repeat="dealer in dealers | filter:query ">
<div class="item item-thumbnail-left item-icon-right" href="#">
<h2>{{dealer.Store_Name}}</h2>
<p>{{dealer.S_Address.area}} {{dealer.S_Address.city}}</p>
<p>{{dealer.S_Services}}</p>
</div>
</div>

This should work like you want it.
$scope.$watch(function() {
return window.localStorage.getItem("searchstore")
},
function(searchstore) {
$scope.query = searchstore;
});
$scope.clearSearch = function() {
// You could remove aswell, but I prefer setting it empty
// window.localStorage.removeItem("searchstore");
window.localStorage.setItem("searchstore", "");
};

Angular UI Typeahead - Prevent dropdown close on select

I wanted to be able to show the whole list after a selection. The way I wanted to do that is by placing the selection in the placeholder and clearing the input's model.
On the typeahead-on-select event, I save the value that was selected and I set the model to be "". I expected the dropdown to appear just like if the input is empty, but it doesn't.
<input type="text" ng-model="myModel" data-min-length="0"
typeahead="item for item in items | filter:$viewValue"
placeholder="{{currentModel}}"
ng-blur="validateSelection()"
typeahead-on-select="onSelect($item, $model, $label)">
When I clear the input's model, typeahead doesn't detect the change in the model. If I then type 1 character and erase it, I get the whole list.
Angular v1.2.9
Angular Bootstrap v0.10.0
Any help would be appreciated, even a different approach.
EDIT:
How do I either prevent the dropdown closing after select or make typeahead detect the change in my model?

I do something similar. I add a button to the right of the typeahead so it looks like a dropdown menu and clicking the button makes the typeahead choices show up. You could do the equivalent of the button click I use to make it happen. You'll have to modify the code below to your needs. This comes from a directive I made
var which = 'idOfTypehead'; // This is actually a variable, I just set it here
// it is the id="XXX" from my typeahead
$("#"+which).focus();
var e = jQuery.Event('keydown', {which: 40 });
$timeout(function() {
$("#"+which).trigger(e);
},0);
} ;

I could solve this just adding a ng-click function stoping the propagation to the modal content. In this way ng-click="dropdownMenuClick($event)".
<header class="top-header clearfix" data-ng-controller="headerController">
<!--modal search panel-->
<li class="dropdown top-bar-item search-panel" ng-show="searchCallback">
<a href="javascript:;" class="dropdown-toggle" toggle="dropdown">
<i class="glyphicon glyphicon-search"></i>
<span>Search modal panel</span>
</a>
<div class="dropdown-menu with-arrow panel panel-dark" style="width: 330px;">
<div class="panel-heading">
<i class="glyphicon glyphicon-search"></i> <span>{{currentSearchTitle}}</span>
</div>
<div ng-click="dropdownMenuClick($event)">
<div class="panel-body">
<div class="row">
<input type="text"
placeholder="Type your word"
ng-model="result"
typeahead="item as item.Name for item in buildings($viewValue)"
typeahead-on-select='onSelect($item, $model, $label)'
class="form-control">
</div>
</div>
</div>
<div class="panel-footer text-right">
<a href="javascript:;" class="" toggle="dropdown" ng-click="searchCallback(seachFilter)">
<i class="glyphicon glyphicon-search"></i>
<span>Search</span>
</a>
</div>
</div>
</li>
<!--modal search panel-->
</header>
In the controller:
(function () {
'use strict';
angular.module('app')
.controller('headerController', [
'$scope', '$http', '$routeParams', 'logger', '$modal', 'appConfig',
function ($scope, $http, $routeParams, logger, $modal, appConfig) {
$scope.dropdownMenuClick = function ($event) {
$event.preventDefault()
};
}
]);
}).call(this);