【ons-modal】ons-modalを使った実装【OnsenUI・Angular】

【ons-modal】ons-modalを使った実装【OnsenUI・Angular】

管理系のアプリを作成した時の話。
初回起動時にパスワード入力画面を表示させるという実装で、
パスワード画面が表示されている時は、tabbarや他のボタンを押させたくないというのがあった。
これを満たすためにons-modalタグを使ったが、結構はまった。
今回ははまった内容として、「ons-modal」が認識されない原因について。<環境>
OnsenUI 2.0
AngularJS 1.5

まず、をangularJS側で取得するためには、var属性を指定するとドキュメントにもある。
が、とそれを扱うjsファイルとの位置関係ではまった。
例えば以下の2つのファイルを用意する。

■index.html

<ons-modal var="testModal">
	<h1>testModal</h1>
	<p>test</p>
	<p>test</p>
	<p>test</p>
</ons-modal>

<ons-template id="home.html">
	<ons-page>
		<div class="main" ng-controller="myCtrl as mctrl">
		<h1>ホーム</h1>
		<ons-button ng-click="mctrl.showModal()">Open Modal</ons-button>
	</ons-page>
</ons-template>

■myController.js

myApp.controller('myCtrl', function(){
	this.showModal(){
		testModal.show();
	}
});

この状況だとうまく動く。一方で、index.htmlを以下のようにすると動かなくなる。

■index.html

<ons-template id="home.html">
	<ons-page>
		<div class="main" ng-controller="myCtrl as mctrl">
		<h1>ホーム</h1>
		<ons-button ng-click="mctrl.showModal()">Open Modal</ons-button>
	</ons-page>
</ons-template>

<ons-modal var="testModal">
	<h1>testModal</h1>
	<p>test</p>
	<p>test</p>
	<p>test</p>
</ons-modal>

との順序を入れ替えただけ。
考えれば当たり前のことだけど、このようにすると

modalが出来る前に、myController.jsの中を見に行くので、「testModalって何？見つからないよ！」と怒られる。
順番には注意。