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;
});

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

ng-click inside a form modal doesn't fire event

I just wrote that simple button that open a modal. In this modal I put a "Close" button that fires a "closeLogin()" function that works well. The same way I create a beer button inside the login form to launch a "doTestme()" function but it is never launched. Please see below:
Button that correctly trigger the modal:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Welcome">
<ion-content class="padding">
<button type="button" class="button" ng-click="login()">Log-in Test, click on the beer!</button>
</ion-content>
</ion-view>
</script>
The "MainCtrl" that handle the $scope for this:
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal, $timeout) {
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
$scope.doTestme = function() {
alert("test ok");
};
Modal that correctly pop-out:
<script id="templates/login.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password" style="-webkit-flex: 1 0 100px;"><button type="button" ng-click="doTestme()" class="button button-icon ion-beer" style="font-size:35px;"></button>
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
</script>
It's as if the ng-click is never watched, I don't have any errors in console, no way to debug this so... Any idea?
Here is the codepen: http://codepen.io/anon/pen/jEpNGB

You should not use buttons inside label.It will not work properly.
Just change the container from <label> to <div>
<div class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password" style="-webkit-flex: 1 0 100px;">
<button type="button" ng-click="doTestme()" class="button button-icon ion-beer" style="font-size:35px;"></button>
</div>
Check this working codepen

In first moment i tried two things:
Change the function to "doAlert()"
Change the button to a normal link " test"
It's worked! But few minutes after the link not fired anymore the alert box.
I tried just in CodePlen. Please do it outside there and send a feed back.

How to access controller of the current view in ion-header-bar which is saved as a directive?

When I put my ion-header-bar in a seperate file (header-dash.html) and assign it as a directive "headerDash", I seem not to be able to access my DashCtrl or the controller of my view where the header-dash directive is called. More specific, in the code below, I cannot call the function changeDashMode(). However, when I replace <header-dash></header-cash> with the content of header-dash.html, then everything works fine.
I guess it has something to do with the setup of the directive, anyone thoughts?
Update: newImport() also in header-dash does work... it is when I added another function changeDashMode that it does not work. What is going on?
controllers.js
.controller('DashCtrl', function($scope) {
// -------------------------------------------------------------------------
// Init
$scope.dashMode = false;
// ---------------------------------------------------------------------------
$scope.changeDashMode = function() {
console.log("test")
if (!$scope.dashMode) {$scope.dashMode = true;} else {$scope.dashMode = false;}
}
// and the rest of the controller
// ...
})
header-dash.html
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button button-light" ng-click="newImport()">+ New</button>
</div>
<h1 class="title"><logo></logo></h1>
<div class="buttons" ng-controller="DashCtrl">
<button class="button button-light" ng-show="!dashMode" ng-click="changeDashMode()">Select</button>
<button class="button button-light" ng-show="dashMode" ng-click="changeDashMode()">Edit</button>
</div>
</ion-header-bar>
tab-dash.html
<ion-view view-title="Dashboard">
<header-dash></header-dash>
<ion-content has-bouncing="true" has-header="true">
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item>Select mode? {{dashMode}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
directives.js
angular.module('starter.directives', [])
.directive('headerDash', function() {
return {
restrict: 'E',
templateUrl: 'templates/header-dash.html' // tried to add controller: "DashCtrl" but that didnt work
}
})

Is tab-dash.html being the template displayed by the DashCtrl?
Because in header-dash.html, you're using ng-controller again, creating an child scope, effectively having DashCtrl in DashCtrl
<div class="buttons" ng-controller="DashCtrl">