Fix IE bug - ng:href

ng:href was producing unclickable links, as the event propagation was stopped by 'a' widget

All links in regression/issue-352.html were tested in:

* Chrome 11
* Opera 11
* Firefox 4
* IE7, IE8

Closes #352

2 files changed, 62 insertions, 1 deletions

diff --git a/src/markups.js b/src/markups.js
index 24de5c37..2a9b1c3e 100644
--- a/src/markups.js
+++ b/src/markups.js
@@ -105,6 +105,59 @@ angularTextMarkup('option', function(text, textNode, parentElement){
  *
  * @element ANY
  * @param {template} template any string which can contain `{{}}` markup.
+ *
+ * @example
+ * This example uses `link` variable inside `href` attribute:
+    <doc:example>
+      <doc:source>
+        <input name="value" /><br />
+        <a id="link-1" href ng:click="value = 1">link 1</a> (link, don't reload)<br />
+        <a id="link-2" href="" ng:click="value = 2">link 2</a> (link, don't reload)<br />
+        <a id="link-3" ng:href="#{{'123'}}" ng:click="value = 3">link 3</a> (link, reload!)<br />
+        <a id="link-4" href="" name="xx" ng:click="value = 4">anchor</a> (link, don't reload)<br />
+        <a id="link-5" name="xxx" ng:click="value = 5">anchor</a> (no link)<br />
+        <a id="link-6" ng:href="#/{{value}}">link</a> (link, change hash)
+      </doc:source>
+      <doc:scenario>
+        it('should execute ng:click but not reload when href without value', function() {
+          element('#link-1').click();
+          expect(element('input[name=value]').val()).toEqual('1');
+          expect(element('#link-1').attr('href')).toBe("");
+        });
+
+        it('should execute ng:click but not reload when href empty string', function() {
+          element('#link-2').click();
+          expect(element('input[name=value]').val()).toEqual('2');
+          expect(element('#link-2').attr('href')).toBe("");
+        });
+
+        it('should execute ng:click and change url when ng:href specified', function() {
+          element('#link-3').click();
+          expect(element('input[name=value]').val()).toEqual('3');
+          expect(element('#link-3').attr('href')).toBe("#123");
+          expect(browser().location().hash()).toEqual('123');
+        });
+
+        it('should execute ng:click but not reload when href empty string and name specified', function() {
+          element('#link-4').click();
+          expect(element('input[name=value]').val()).toEqual('4');
+          expect(element('#link-4').attr('href')).toBe("");
+        });
+
+        it('should execute ng:click but not reload when no href but name specified', function() {
+          element('#link-5').click();
+          expect(element('input[name=value]').val()).toEqual('5');
+          expect(element('#link-5').attr('href')).toBe(undefined);
+        });
+
+        it('should only change url when only ng:href', function() {
+          input('value').enter('6');
+          element('#link-6').click();
+          expect(browser().location().hash()).toEqual('/6');
+          expect(element('#link-6').attr('href')).toBe("#/6");
+        });
+      </doc:scenario>
+    </doc:example>
  */
 
 /**
diff --git a/src/widgets.js b/src/widgets.js
index 6aa0227c..a56a967e 100644
--- a/src/widgets.js
+++ b/src/widgets.js
@@ -821,7 +821,15 @@ angularWidget('a', function() {
   this.directives(true);
 
   return function(element) {
-    if (element.attr('href') === '') {
+    var hasNgHref = ((element.attr('ng:bind-attr') || '').indexOf('"href":') !== -1);
+
+    // turn <a href ng:click="..">link</a> into a link in IE
+    // but only if it doesn't have name attribute, in which case it's an anchor
+    if (!hasNgHref && !element.attr('name') && !element.attr('href')) {
+      element.attr('href', '');
+    }
+
+    if (element.attr('href') === '' && !hasNgHref) {
       element.bind('click', function(event){
         event.preventDefault();
       });