ons-tabbar-itemを使って外部サイトを開きたい


お世話になります。

ons-tabbar-itemのpage属性に外部サイトのURLを記述すると、アプリの中で開くため、  
「戻る」などの操作ができなくなります。

そのため、タップした時に、アプリ内の専用ブラウザを開くか、スマートフォンのブラウザアプリを起動させて指定した外部サイトを開きたいと思っております。

どのように記述すればよいかご教授いただけませんでしょうか。

宜しくお願い致します。




`<ons-tab>`のクリックイベントを拾ってその中で`window.open()`してはどうでしょうか。  
下記の例では`window.open()`する代わりに`alert()`しています。  
当該タブをアクティブにしたくないという場合はtabbarのイベントをキャンセルしてください。

[code]

    ons.bootstrap()
    .controller("TabbarController", function($scope) {
      this.openWindow = function() {
        alert("clicked!");
    //    window.open('http://ja.stackoverflow.com', '_blank');
      };
      
      // タブをアクティブにしたくない場合
      $scope.$evalAsync(function() {
        $scope.tabbar.on('prechange', function(e) {
          if (e.index === 2) {
            e.cancel();
          }
        });
      });
    });
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/css/onsen-css-components.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/css/onsenui.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.15/build/js/onsenui.min.js"></script>
    
    
    <ons-tabbar var="tabbar" ng-controller="TabbarController as ctrl">
      <ons-tab icon="home" label="home" page="home.html" active="true"></ons-tab>
      <ons-tab icon="gear" label="settings" page="settings.html"></ons-tab>
      <ons-tab icon="external-link" label="link" ng-click="ctrl.openWindow()"></ons-tab>
    </ons-tabbar>
    
    <ons-template id="home.html">
      <h1>Home</h1>
    </ons-template>
    
    <ons-template id="settings.html">
      <h1>Settings</h1>
    </ons-template>
[/code]

