OnsenUI 2 Beta + AngularJS 1.5 でAndroidのオプションメニューを作る

こんな感じのAndroidのオプションボタンを押したらポップップメニューが表示されるようなものを実装した時にハマったのでメモ。

→

記事の対象者

• ons-popoverを使っている人

問題

ons-popoverは新しいスコープを作るらしく、メニュー項目にng-clickを仕込んでも動かない。

StackOverflowで探してみたが、これはなんかごちゃごちゃしてるし、これは動かない。
できれば$scopeを使うのは避けたい。

解決策（Beta.9まで）

document.getElementById()でDOMオブジェクトを抜き出してonclick属性を付与する。

<ons-page>
    <!-- ドロップダウンメニュー -->
    <ons-toolbar>
        <div class="left">
            <ons-back-button></ons-back-button>
        </div>
        <div class="center">スケジュール詳細</div>
        <div class="right">
            <ons-if platform="android">
                <ons-toolbar-button id="menu" ng-click="$ctrl.showMenu()"><ons-icon icon="md-more-vert"></ons-icon></ons-toolbar-button>
            </ons-if>
        </div>
    </ons-toolbar>

    <!-- ドロップダウンメニュー -->
    <ons-template id="popover.html">
        <ons-popover cancelable cover-target ons-posthide="popover.destroy()" >
            <ons-list>
                <ons-list-item id="menu_edit" tappable>スケジュールを編集</ons-list-item>
                <ons-list-item id="menu_delete" tappable>スケジュールを削除</ons-list-item>
            </ons-list>
        </ons-popover>
    </ons-template>
</ons-page>

メニュー表示のタイミングでons.createPopoverを呼んでいるため。ons-posthide="popover.destroy()として毎回オブジェクトを破棄させている。

// ポップアップメニューの表示
this.showMenu = function() {
    ons.createPopover('popover.html').then(function(popover) {
        popover.show('#menu');
        document.getElementById('menu_edit').onclick = function() {
            gotoEdit();
            popover.hide();
        }
        document.getElementById('menu_delete').onclick = function() {
            confirmDelete();
            popover.hide();
        }
    });
}

出来たはいいが全くAngular的ではない。
残念なことに、popover.destroy()は現行バージョンでは利用できない。
他に良い案がないか検討中。

結論

ons-popoverではng-clickは使えない。
document.getElementById().onclick にコールバックを設定しよう。