指定した外部URLを新規タブで開く（$window.open）

AngularJSで指定したURLを新規タブで開く方法についてです。

通常であればAngularJSとか使わずに<a>タグで「target="_blank"」を埋め込めば使えるのですが、<a>タグでのURL指定と「ng-click」を併用した場合、モバイルデバイスでは<a>タグで指定したURLが開かれないという事態に陥りました。

モバイルデバイスの場合、タッチ長押しでリンクをコピーしたりできるので、できれば<a>タグの「href」属性にURLを指定したのかったのですが、結局うまく動作せず、仕方がないので「ng-click」で呼び出されるコントローラー側のメソッドで指定した外部URLを開くようにしました。

以下はその時のメモです。

HTML

<div ng-controller="exampleCtrl">
    <a href="http://example.com/" ng-click="clickUrl()" target="_blank">example url</a>
</div>

JavaScript

var myApp = angular.module('exampleApp', []);

myApp.controller('exampleCtrl', function ($scope) {
    $scope.clickUrl = function() {
        // URLオープンと同時に行いたい処理
    };
});

上記のコードはPCでは問題なく動作しますが、モバイルデバイスでは指定したURLが開きません。

HTML

<div ng-controller="exampleCtrl">
    <a href="" ng-click="clickUrl('http://example.com/')" target="_blank">example url</a>
</div>

JavaScript

var myApp = angular.module('exampleApp', []);

myApp.controller('exampleCtrl', function ($scope, $window) {
    $scope.clickUrl = function(url) {
        $window.open(url, '_blank');
        // URLオープンと同時に行いたい処理
    };
});

他の方法として、ngTouchの導入や独自にtouchendのイベントをng-clickに割り当てるなど、どうにかなりそうな方法がいくつかあったので試してみましたが、いずれも動作しませんでした。

• AngularJS Tip: How to Fix an Angular Directive Issue | Codementor
• AngularJSでリンクを新しいタブで開くDirectiveをつくる - Qiita