Fix IE bug - ng:href

vojtajina · IgorMinar · commit 4b0f2dfe0cbd · 2011-06-02T11:15:41.000-07:00
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
diff --git a/regression/issue-352.html b/regression/issue-352.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html xmlns:ng="http://angularjs.org">
+  <script type="text/javascript" src="../build/angular.js" ng:autobind></script>
+  <body ng:init="scope = { itemId: 12345 }">
+	<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)
+  </body>
+</html>
diff --git 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
@@ -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();
       });
