<a><button></a> broken

[derbexuk]

Hi Matt,

thanks for the nice directive, generally it's working well.

I have an issue though where buttons in links inside forms are disabled. Not a big deal I can just use text links.

So :
<span ng-hide="user.has_file"> <a href="/cv_upload"> <button class="btn">Upload Your CV</button></span></a>

fails to fire on the button press but :
<span ng-hide="user.has_file"> <a href="/cv_upload">Upload Your CV</span></a>
works fine.

[facultymatt]

Thanks, I'll look into this. In the meantime can you update your example to include commented code - currently its just <a> tag links that seem to be broken.

You can use the ``` tag as well to format blocks of code.

// this is a block
// of code

[facultymatt]

Also you would never write <a><button></a> as you have in your title, that just isn't proper html. Remember that buttons need ng-click while<a> tags need href

Something like this,

<button ng-click="processFrom()">Process Form</button>

<a ng-href="/visit-url">Visit Url</a>

[derbexuk]

Thanks for that, I have commented the links so you can see the code. The first version, which is a bit ugly now I come to think of it -I could use the button classes in the <a> tag, used to work, but no longer does with the form using the directive. I changed it to the second version, which works fine.

I also had a problem with multiple forms on one page, but I decided that I didn't really need that and changed the code to be one form.

[facultymatt]

A few things, first thanks for clarifying the example code with comments.

Next, there is a bug with the current directive and multiple forms. I've fixed this and will be updating the code soon. An easy fix in the meantime, like you did, is to just use a single form.

Lastly, the fact this directive effects the functionality of buttons and links within it is odd (as you noted the link works fine when the directive is removed.). This needs more investigation. However, you really should fix the syntax errors - its not proper to put a <button> inside an <a> tag - and this will lead to all types of problems and inconsistent behaviors. See http://stackoverflow.com/a/6393863 for details.

A few suggestions, I noticed you're using the bootstrap class btn. If you are using a button solely style, remember you can add the btn class to a link for the same effect.

<a href="/mylink" class="btn">This link will look like a bootstrap button<a>

In addition, you could apply the ng-show attr to the link itself, there's really no need to wrap it with a span

<a ng-hide="user.has_file" href="/mylink" class="btn">This link will look like a bootstrap button<a>

This would clean up your code a bit. Hope this helps!

[derbexuk]

It does thanks, I'm more of a backend person.

[facultymatt]

@derbexuk check out https://github.com/facultymatt/angular-unsavedChanges/tree/develop for updates that fix multiple form issues. Thanks!