

「Onsen UI最小限のテンプレート」で「Onsen UI
Guide」にある「アラートダイアログを使う」を行いたいのですが、「アラートダイアログを使う」のHTMLとJSのソースコードをどのように「Onsen
UI最小限のテンプレート」に適用すればアラートダイアログを出力できるのでしょうか。

index.htmlの

[code]

    <script>
      ons.bootstrap();
    </script>
    
[/code]

を

[code]

    <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>
    
[/code]

にするとプレビュー画面は真っ白になります

これを無くして page1.html の

[code]

    </ons-page>
    
[/code]

の直前に

[code]

    <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>
    
[/code]

を加えただけだと、画面上に"Alert Confirm Prompt"という文字が表示されます。

本当に初歩的なことと思いますが、どうかご回答をお願いいたします。


CC BY-SA 3.0
2015-04-03T03:22:43.710
8710
2015-04-03T09:30:58.197
2015-04-03T03:45:23.493
49
9140
question
monaca onsen-ui
「Onsen UI最小限のテンプレート」で「Onsen UI Guide」にある「アラートダイアログを使う」を行うには


こんな感じでいけると思います。

index.html

[code]

    <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>
    
[/code]

page1.html

[code]

    <ons-page>
        <ons-toolbar>
            <div class="center">Navigator</div>
        </ons-toolbar>
    
        <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>
    </ons-page>
    
[/code]

質問に書いてあるコードの`ons.bootstrap();`のセミコロンは不要です。


CC BY-SA 3.0
2015-04-03T06:15:26.070
8714
2015-04-03T06:15:26.070
3516
8710
answer