Develop Reference

add Javascript in ionic html

I'm trying to execute Javascript in a ionic modal (HTML) page. It may sound weird, because normally it think you put JS code into a JS file and use data binding to work with js in html, right? But in this case i only can change this specific html file.. So this is what i tried:
<div class="modal">
<ion-header-bar class="bar-secondary">
<h1 class="title">TEST-TITLE</h1>
<button class="button button-clear button-dark" ng-click="modal.hide()"><i class="icon ion-close"></i></button>
</ion-header-bar>
<ion-content class="has-header" delegate-handle="TEST">
<div class="list card">
<div class="item item-body" ng-App="myApp" ng-controller="myCtrl">
<img src="pathToFile.jpg" class="full-image">
<p>
TEXT
</p>
<button class="button button-positive" ng-click="testFunction()">
TEST-BUTTON
</button>
</div>
</div>
</ion-content>
</div>
<script>
var app = angular.module('myApp', ['ionic']);
app.controller('myCtrl', function($scope) {
$scope.testFunction = function () {
$scope.firstName = "John";
$scope.lastName = "Doe";
alert($scope.firstName);
};
});
</script>
But i cannot run the function "testFunction()" after clicking on TEST-BUTTON. Does anyone know what to do?
Update:
This is how the modal is called in the extended js file:
// Fetch the modal and store it in scope
$ionicModal.fromTemplateUrl('pathToModal', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});

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.

Auto scroll to bottom with ng-repeat in Ionic

I have a problem that become a realy nightmare. I build a mobile chat app with Ionic, Angular and Firebase. The message exchange works well, but i have problem with auto scroll do bottom when received new messages, i try use $ionicScrollDelegate, scroll-glue Directive, Jquery function and nothing works.
Page chat
<div ng-controller="ChatController as chatCtrl" id="chats_page" class="upage-content vertical-col left hidden has-subheader">
<div class="bar bar-subheader subheader-chat">
<h2 class="title">{{chatCtrl.status}}</h2>
</div>
<div class="" data-uib="layout/row" data-ver="0" id="chatBox">
<ion-content id="autoscroll" class="widget uib_w_92 d-margins topbar" data-uib="ionic/list" data-ver="0" delegate-handle="mainScroll">
<ion-list scroll-glue>
<ion-item ng-repeat="msg in chatCtrl.messages" class="item widget uib_w_93 chat-cliente item-text-wrap" data-uib="ionic/list_item" data-ver="0" ng-class="chatCtrl.getRole(msg.role)">{{msg.text}}<a class="chat-time">{{msg.time}}</a>
</ion-item>
</ion-list>
</ion-content>
</div>
<div class="bar bar-footer footer-chat" >
<i class="placeholder-icon "></i>
<textarea type="text" name="msg" placeholder="Digite sua mensagem..." class="chat-text" ng-disabled="chatCtrl.msgText()" ng-model="myMsg" ></textarea>
<button class="button ion-paper-airplane btn-chat-send" ng-click="chatCtrl.sendMsg(myMsg)" ng-disabled="chatCtrl.msgText()" id='btn_send_chat'></button>
</div>
</div>
And piece of ChatController
angular.module('myApp')
.controller("ChatController", ['User','FireBaseApp','$firebase','$ionicLoading','$timeout','$ionicPlatform','$location','$ionicHistory','$timeout','$ionicPopup','$ionicScrollDelegate','$scope',function(User, FireBaseApp ,$firebase, $ionicLoading,$timeout,$ionicPlatform,$location,$ionicHistory,$timeout,$ionicPopup,$ionicScrollDelegate,$scope){
var self = this;
... pieces of code ...
self.sendMsg = function(msg){
$scope.myMsg = null;
$ionicScrollDelegate.scrollBottom();
}

You can use.
$ionicScrollDelegate.scrollBottom(true);
Example on codepen

After a year i found a solution: Separate my app in angular template and finally scrollglue works.

ng-Click not firing even tho it's in the same scope

I searched through the forum but I didnt find an answer to this question. I want to set the value of my input field to the geolocated Address after button click but the ng-Click="locate()" is not firing. Here is my HTML:
<script id="templates/search.html" type="text/ng-template">
<ion-view view-title="Datenerfassung">
<ion-content class="padding" ng-controller="DataCtrl">
<div class="list">
<!-- Adressen Input Feld -->
<label class="item item-input item-floating-label">
<span class="input-label">Startpunkt in Adressform</span>
<input id="address" type="text" placeholder="Startpunkt in Adressform">
<button id="curr_loc" class="button button-balanced" ng-Click="locate()">this-one-doesnt-fire</button>
</label>
<!-- Zeit Input Feld -->
<label class="item item-input item-floating-label">
<span class="input-label">Zeit in Minuten</span>
<input id="time" type="number" placeholder="Zeit in Minuten">
</label>
</div>
<!-- Fortbewegungsmittel Toggle Liste -->
<div class="item item-divider">
Mit welchem Fortbewegungsmittel </br>
möchten Sie die Umgebung erkunden?
</div>
<ion-radio ng-model="$parent.move" value="walk">Zu Fuß</ion-radio>
<ion-radio ng-model="$parent.move" value="transit">Tram</ion-radio>
<ion-radio ng-model="$parent.move" value="car">Auto</ion-radio>
<ion-radio ng-model="$parent.move" value="bike">Fahrrad</ion-radio>
<!-- Button zum loslegen -->
<button id="erkunden" ui-sref="map" class="button button-balanced" ng-Click="setData()">Erkunden</button>
</ion-content>
<ion-tabs class="tabs-balanced tabs-icon-top">
<ion-tab ui-sref="home" title="Home" icon="ion-home"></ion-tab>
<ion-tab ui-sref="faq" title="FAQ" icon="ion-help-circled"></ion-tab>
<ion-tab ui-sref="about" title="About" icon="ion-information-circled"></ion-tab>
<ion-tab ui-sref="impressum" title="Impressum" icon="ion-clipboard"></ion-tab>
</ion-tabs>
</ion-view>
</script>
And my contoller looks like this:
mapApp.controller("DataCtrl", function($scope, dataService) {
$scope.setData = function() {
var address = document.getElementById("address").value;
var time = document.getElementById("time").value;
var move = $scope.move;
dataService.setData(address,time,move);
};
$scope.locate = function() {
console.log("asd");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log(pos);
document.getElementById("address").value = pos[0] + "," + pos[1];
});
}
};
});
Like I said, clicking on the button is not triggering the locate() function. Otherwise, clicking on the "Erkunden" button triggers the scope.setData() function even tho both buttons are defined similar.
Pretty sure that it is some stupid error I can not see in my tunnel vision but I just cant solve that issue.
Thanks for your help in advance, best regards
jule

Your code will work perfectly if you take the button outside the scope of the label.
<label class="item item-input item-floating-label">
<span class="input-label">Startpunkt in Adressform</span>
<input id="address" type="text" placeholder="Startpunkt in Adressform">
</label>
<button id="curr_loc" class="button button-balanced" ng-click="locate()">this-one-doesnt-fire</button>

Your AngularJS directive is misspelled as 'ng-Click'. Correct spelling is 'ng-click'

ng-click outside form dosen't get data

click i dosen't get the form data when button is outside form
code
<ion-view title="Indstillinger">
<ion-nav-buttons side="right">
<button class="button" form="userForm" ng-click="update()">
Gem
</button>
</ion-nav-buttons>
<ion-content padding="true" class="has-header">
<form id="userForm">
<ion-list>
<label class="item item-input" name="navn">
<span class="input-label">Navn</span>
<input type="text" placeholder={{user.name}} ng-model="name">
</label>
</ion-list>
</form>
</ion-content>
i tried add form id to form and button, but i still dosen't get the form data on ngclick :/
update:
$scope.update = function() {
console.log(this.name);
})

ion-content creates a child scope. The input element is setting the "name" property on this scope, not the scope being used in the ion-nav-buttons section.
This is the classic "dot notation" issue in Angular.
If you are using an "outer" controller:
<div ng-controller="outer as vm">
<ion-view title="Indstillinger">
<ion-nav-buttons side="right">
<button class="button" form="userForm" ng-click="update()">
Gem
</button>
</ion-nav-buttons>
<ion-content padding="true" class="has-header">
<form id="userForm">
<ion-list>
<label class="item item-input" name="navn">
<span class="input-label">Navn</span>
<input type="text" placeholder={{user.name}} ng-model="vm.name">
</label>
</ion-list>
</form>
</ion-content>
</div>
.controller('outer', function($scope) {
$scope.user = {
name: "Joe"
}
$scope.update = function()
{
console.log($scope.vm.name);
}
})

You will want to use:
console.log($scope.name);
instead of:
console.log(this.name);

since you didn't post the rest of HTML or the rest of controller code , this is the only answer I can possibly provide
$scope.update = function() {
console.log($scope.name);
})
I know you said that it doesn't work , but that code is in fact valid and does work. Something else that you refused to post is breaking
Did you check console for errors? I'm sure there are some, did you confirm that angular is properly loaded, did you properly set add ng-app and ng-controller ?

1) Try moving your <button ng-click="update"> outside of your <ion-nav-buttons> container and see if it works.
2) If it works, read this: Transcluding ng-click in a directive