Ng-click won't work with anything but a button if inside a form

ionic-v1
1

Well, as stated by the title, I’m having this problem, say, i have a form with multiple steps that i created using the ng-show property along with a function to set a $scope variable to an identifier in order to hide everything but the steps that the user should be undergoing, all worked fine, but then, i realise the form was being summited on every user click on the buttons to continue tho the next part of the form. in other words this:

<button class="button button-block button-positive" ng-click="selectTab(2)">Continuar</button</label>

inside a form, make some div like this:

<div ng-show="tab === 2"> ... data goes here ... </div>

show up and disappear as the user navigates, but is also submitting the form, but if i change the tag like this :

<label class="item">
                    <div class="button button-block button-positive" ng-click="selectTab(2)">Continuar</div>
                </label>

it just won’t work at all, my form its not being submitted on every click, so thats an update on the situation, but its not working either, ¿why is this happening? ¿how can i fix it?.

Thanks in advance and sorry to bother you all.

2

Ended up solving my problem, setting the type property of button to “input” did the trick, still, i have ben left wondering as to why ng-click only works with buttons, at least inside form.

3

Yep, because:

if you use onle one button without a specified type angularjs uses this button to submit a form -> triggering ng-submit.
Same thing, if you have different buttons in a form -> the first one will be used as submit button, also if there is another ng-click function on it.

Your could also use <button type="button">.

Greetz.

4

You can use click event with using data-tap-disabled="false" element inside button tag.

5

@alfabc
this is more a hack if you will disable data-tapping on a button ^^.
You only have to follow base angularjs things… nothing more and nothing less… -.-

Greetz.

6

I still don’t understand why ng-click won’t work on div elements inside forms, as i have div with this attribute on other parts of my application and they work just fine. type=“button” work ok as well :D.

7

To further understand, I’d suggest you take some time and read the docs about forms, ng-submit, and ng-click

8

Hi,

If your button is inside the <label> ng-click will not work.

Change the tag to a div or span.

2 Likes
9

I have a similar issue (not necessarilly with divs and form).
I need to manipulate a text to turn some parts of it on hyperlinks that points to a function on my controller. This was the easy part, when i get the following string (the signal before the “a” on hyperlink is just to break formatation):

some text:

<‘a href="" ng-click=“setLinkValue(‘valueFor1’)”>#CALL1 <’/a>

<‘a href="" ng-click=“setLinkValue(‘valueFor2’)”>#CALL2 <’/a>

The text looks just fine when binded with ‘ng-bind-html’, but the hyperlinks doesn’t calls the ng-click function. Nothing happens, no logs, no errors…

data-tap-disabled=“false” didn’t change the behavior neither any other thing I’ve tried.
Anyone?

10

Thanks! I had my button inside a label, changed it to div and voila! It works! :slight_smile:

11

You could use any other similar behaviour from angular directives like ngMousedown, ngFocus and so on to call your intended code. Hope that helps.