feat(uiSref): Add support for ctrl/middle-clicking on a uiSref generated URL (#175)

Closes #147

Author: euangoddard

src/directives/uiSref.ts

@@ -1,7 +1,7 @@
 /** @ng2api @module directives */
 /** */
 import { UIRouter, extend, Obj, TransitionOptions, TargetState } from "@uirouter/core";
-import { Directive, Inject, Input, Optional, ElementRef, Renderer2, OnChanges, SimpleChanges } from "@angular/core";
+import { Directive, Inject, Input, Optional, ElementRef, Renderer2, OnChanges, SimpleChanges, HostListener } from "@angular/core";
 import { UIView, ParentUIViewInject } from "./uiView";
 import { ReplaySubject } from "rxjs/ReplaySubject";
 import { Subscription } from "rxjs/Subscription";
@@ -69,7 +69,6 @@ export class AnchorUISref {
 @Directive({
   selector: '[uiSref]',
   exportAs: 'uiSref',
-  host: { '(click)': 'go()' }
 })
 export class UISref implements OnChanges {
 
@@ -169,9 +168,10 @@ export class UISref implements OnChanges {
   }
 
   /** When triggered by a (click) event, this function transitions to the UISref's target state */
-  go() {
-    if (this._anchorUISref && this._anchorUISref.openInNewTab()) {
-      return ;
+  @HostListener("click", ["$event.button", "$event.ctrlKey", "$event.metaKey"])
+  go(button: number, ctrlKey: boolean, metaKey: boolean) {
+    if (this._anchorUISref && (this._anchorUISref.openInNewTab() || button !== 0 || ctrlKey || metaKey)) {
+      return;
     }
 
     this._router.stateService.go(this.state, this.params, this.getOptions());

test/uiSref/uiSref.spec.ts

@@ -104,7 +104,7 @@ describe('uiSref', () => {
 
         describe('when clicked', () => {
           beforeEach(() => {
-            des[0].triggerEventHandler('click', {});
+            des[0].triggerEventHandler('click', {button: 0, metaKey: false, ctrlKey: false});
           });
 
           it('should ignore the click event', () => {
@@ -121,7 +121,7 @@ describe('uiSref', () => {
 
         describe('when clicked', () => {
           beforeEach(() => {
-            des[0].triggerEventHandler('click', {});
+            des[0].triggerEventHandler('click', {button: 0, metaKey: false, ctrlKey: false});
           });
 
           it('should navigate to the state', () => {

test/uiSrefStatus/uiSrefStatus.spec.ts

@@ -39,7 +39,7 @@ describe('uiSrefStatus', () => {
   describe('when click on `foo` uiSref', () => {
     beforeEach(async(() => {
       spyOn(component, 'updated');
-      de.triggerEventHandler('click', {});
+      de.triggerEventHandler('click', {button: 0, metaKey: false, ctrlKey: false});
     }));
 
     it('should emit a event with a TargetState pointing to `foo`', () => {