「Onsen UI最小限のテンプレート」で「Onsen UI Guide」にある「アラートダイアログを使う」を行うには
「Onsen UI最小限のテンプレート」で「Onsen UI Guide」にある「アラートダイアログを使う」を行いたいのですが、「アラートダイアログを使う」のHTMLとJSのソースコードをどのように「Onsen UI最小限のテンプレート」に適用すればアラートダイアログを出力できるのでしょうか。
index.htmlの
<script>
ons.bootstrap();
</script>
を
<script>
ons.bootstrap();
.controller('NotificationController', function($scope) {
$scope.alert = function() {
ons.notification.alert({message: 'An error has occurred!'});
}
$scope.confirm = function() {
ons.notification.confirm({
message: 'Are you sure you want to continue?',
callback: function(idx) {
switch(idx) {
case 0:
ons.notification.alert({
message: 'You pressed "Cancel".'
});
break;
case 1:
ons.notification.alert({
message: 'You pressed "OK".'
});
break;
}
}
});
}
$scope.prompt = function() {
ons.notification.prompt({
message: "Please enter your age",
callback: function(age) {
ons.notification.alert({
message: 'You are ' + parseInt(age || 0) + ' years old.'
});
}
});
}
});
</script>
にするとプレビュー画面は真っ白になります
これを無くして page1.html の
</ons-page>
の直前に
<ons-list ng-controller="NotificationController">
<ons-list-item ng-click="alert()" modifier="tappable">
Alert
</ons-list-item>
<ons-list-item ng-click="confirm()" modifier="tappable">
Confirm
</ons-list-item>
<ons-list-item ng-click="prompt()" modifier="tappable">
Prompt
</ons-list-item>
</ons-list>
を加えただけだと、画面上に"Alert Confirm Prompt"という文字が表示されます。
本当に初歩的なことと思いますが、どうかご回答をお願いいたします。