angularjs + ui.router：私は代わりに現在</p> <pre><code><a app-external-link href="http://example.com">Example</a> </code></pre><p>の別のウィンドウにURLを開くように配置されたリンクを引き起こす単純な指令<code>external-link</code>を有する

Question

指令コントローラとリンク機能の間で異なる動作ユーザーは、それが唯一のtarget=_blank属性

のように動作しているので、私はトラッキング機能を削除した例のために、それ

をクリックしたとき、それはtarget="_blank"ようですが、追跡する機能であります

この実装は、期待通りに機能します。なぜ（したがって、この質問）私は理解していない

angular.module('app', []) 
.directive('appExternalLink', function ($window) { 
    var controller = function ($element, $attrs) { 
    $element.on('click', function (event) { 
     event.preventDefault(); 
     $window.open($attrs.href, '_blank'); 
    }); 
    }; 

    return { 
    scope: true, 
    controller: controller 
    }; 
}); 

ディレクティブコントローラ の例では、リンクが正常に新しいウィンドウで開きますが、：どのような私を驚かせたことは、私の 最初のアプローチでは、私はディレクティブのコントローラーを使用していたということですそれはまた、 は新しいURL

それはevent.preventDefault()この場合

これがなぜ起こるか上の任意のアイデアで何もしないかのようである現在のビューを変更しますか？

更新：

ディレクティブは、私は2つの潜在的な解決策を持っているui-sref

<a app-external-link ui-sref="foo">Example</a> 

Plunk here

Answer 1

で使用されたときに問題がのみ発生します。同様に変化するから、現在のページのURLを停止するcontrollerでのクリックハンドラのevent.preventDefault()との組み合わせで

1. 使用event.stopImmediatePropagation()。

   デモ：http://plnkr.co/edit/6Qi8NcWMmOvC4R3ZAqsf?p=info

2. ui-srefが既にtarget="_blank"で仕事をするので、あなたのディレクティブはちょうど要素にその属性を追加してからも、心配することなく、あなたのクリックハンドラでやりたいものは何でもしていますイベントを扱うか、window.openを使用してください。

   element.attr('target', '_blank'); 
   element.on('click', function (event) { 
       //can track clicks or do whatever you want here 
       console.log(attrs.href + ' opened in new tab.'); 
   }); 
   

   デモ：http://plnkr.co/edit/brvftLiqXLznS6IWNmVA?p=info

私はので、私は記載されている理由をを好む、それはより少ないコードだと、それはangularとui-routerあなたがしようとしているものとは別に自分の仕事を行うことができますので、 （ロジックをいくらか複製する必要はありません）。また、私は実際にはまだをテストしていないし、私はまだ見ていない他のものに影響を与えるかもしれません。あなたがそうすることを好むなら、それはうまくいくように見えます。