Tap/click events - what am I missing?

ionic-v1
1

I’m still new to working with Ionic, so I’m sure this is something I’m doing wrong. Working with a Phonegap project using Ionic 1.0.0b3, I’m trying to figure out how to add tap events on a button. I’ve tried a few things but can’t get the tap event to trigger. I can’t find any clear documentation on setting up gestures so I feel a little blind working through this.

At the most basic, here’s an example of what I tried:

From what I’ve seen, I thought angular/Ionic automatically bound events on anything with ng-click, but nothing I try gets it working. I’ve also tried a few things to bind on the element directly but can’t seem to get it.

Suggestions?

2

try and pull it up with a browser and use the javascript console to see if there’s anything errors you may somehow be missing.

I use ng-click like this:

<button ng-click=‘someFunction()’>Click me</button>

and then in the controller that has scope over that element I do:

$scope.someFunction = function() { alert(“click!”); };

3

I’m working primarily from the browser at this point in order to get the console. Nothing is being thrown, which has me all the more puzzled. Putting the alert straight in the directive should work, but in a function call also fails.

I’m loading ionic.bundle.js - I assume that has everything I need, Ionic/Angular/Hammer and I don’t need to load something else to get this to work?

4

Also, a little more context on what I’m doing: I have an app with a nav bar, tab bar, and side drawer. I’ve got a button on the nav bar that should toggle the drawer. I’ve tested my drawer method from the console and it works fine, I just can’t get it to fire from the button in the nav bar. I can’t get anything - even a basic alert - to fire from the button.

5

I’m new too so don’t have much more advice to give. Maybe cut out all the middlemen and see if at least onClick=“alert(‘click’);” works?

6

Yes, onClick works, but I assume it’s not wired up to the special touch handlers.

7

Are you defining your button like this as @chasd00 suggested?

<button ng-click='someFunction()'>Click me</button>

If so, do you have the function someFunction in your scope?

If you posted a CodePen sample we could try to be more help.

8

Essentially, yes. I’m calling a function inside a globally-scoped object. It fires when I do onClick but not ng-click. If it wasn’t finding the function, I’d expect to see an error in the console, but nothing at all shows up in console.

9

I don’t think ng-click will run a globally defined function.

ng-click evaluates an expression inside the quotes.

Expression to evaluate upon click. (Event object is available as $event)

Here is how to deal with this : angularjs - Can I make a function available in every controller in angular? - Stack Overflow

You can put it in a service or just put it on the rootscope.

Here’s a sample : http://codepen.io/calendee/pen/pCzsk?editors=101

10

Evidently that was the problem! I put the method under rootScope and it works. Thanks for the solution. I’m surprised it hadn’t been throwing an error to console.

This raises an additional question. The button is in my nav bar. What scope does it look in when it gets tapped? If I wanted to set something specifically on its scope, where would it go since there is no nav bar controller?

11

From the angularjs docs:

The location where the root scope is attached to the DOM is defined by the location of ng-app directive. Typically ng-app is placed on the element, but it can be placed on other elements as well, if, for example, only a portion of the view needs to be controlled by Angular.

UI functions, including nav bar, should be in a controller. You can place a controller directive on the <body> element, at or below the element with the ng-app directive.