

Monacaを使用して開発している者です。  
以下に設置した「送信」ボタンをタップしたら「アラートダイアログ」を表示させるにはどのようにすればよろしいのでしょうか？

[code]

    <section style="padding: 0 8px 8px">
        <ons-button modifier="large" onclick="confirm()" >送信</ons-button>
    </section>
    <section style="padding: 0 8px 8px">
        <ons-button modifier="large" onclick="saveData()">保存</ons-button>
    </section>
    
[/code]

htmlに `ng-controller="NotificationController"`
がないことが原因ではないかと考え、送信タグの行などに挿入したりいろいろしてみましたが表示されませんでした。

一度表示されたのですが、プレビューと同時に表示されたもので「送信」ボタンとは関係なく表示されただけでした。

JavaScriptファイルは「dialog.js」としてコピーたものをそのまま貼付けています。  
cssファイルはどこにあるか分からず何も追記していません。

よろしくお願いいたします。

[code]

    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.'
            });
          }
        });
      }
    });
    
[/code]


CC BY-SA 3.0
2015-04-05T14:27:16.827
8796
2015-04-09T15:26:11.463
2015-04-09T15:26:11.463
3516
9174
question
monaca onsen-ui
Onsen UI Guide に載っている「アラートダイアログ」をボタンを押した時に表示したい


> htmlに ng-controller="NotificationController" がないことが原因ではないかと考え

サンプルの`alert`や`confirm`は`NotificationController`配下に記述されていますので、こちらの考えは正しいと思います。  
ページ内に複数のボタンを配置するのであれば`<ons-page>`あたりに入れてみてはいかがでしょうか。

また、質問のコードの`onclick="confirm()`の記述を`ng-click="confirm()`にすると動きが変わるかもしれません。  
もし、上記を変更しても何も変わらないようでしたら

  * 「dialog.js」が正しく読み込まれているか
  * `ons.bootstrap()`を2回呼んでいないか

等も確認してみると良いかと思います。

[code]

    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.'
            });
          }
        });
      }
    });
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>
    
    <ons-page ng-controller="NotificationController">
      
      <ons-toolbar>
        <div class="center">
          Notifications
        </div>
      </ons-toolbar>
    
      <h4>ng-click</h4>
      <section style="padding: 0 8px 8px">
        <ons-button modifier="large" ng-click="alert()">Alert</ons-button>
      </section>
      <section style="padding: 0 8px 8px">
        <ons-button modifier="large" ng-click="confirm()">Confirm</ons-button>
      </section>
      <section style="padding: 0 8px 8px">
        <ons-button modifier="large" ng-click="prompt()">Prompt</ons-button>
      </section>
    
      <h4>onclick</h4>
        <section style="padding: 0 8px 8px">
        <ons-button modifier="large" onclick="alert()">Alert</ons-button>
      </section>
      <section style="padding: 0 8px 8px">
        <ons-button modifier="large" onclick="confirm()">Confirm</ons-button>
      </section>
    
    </ons-page>
[/code]


CC BY-SA 3.0
2015-04-06T01:51:56.870
8805
2015-04-06T01:51:56.870
3516
8796
answer