1

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

<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>

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

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

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

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

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.'
        });
      }
    });
  }
});
1

1 件の回答 1

1

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

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

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

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

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

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.'
        });
      }
    });
  }
});
<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>

5
  • ita_3yさん、ありがとうございます。 コメント通りいろいろやってみたら表示には成功しました。 ただiOSだとindex.html undefinedと表示され、androidではちゃんとconfirmと表示されます。 またonclickだと表示されましたが、ng-clickでは表示されませんでした。
    – AIA
    Commented 2015年4月6日 16:45
  • @AIA デバッガでは動作確認できているのですが、実機だと何か違うんですかね。差し支えない範囲で構わないので質問に現在のコードを記載していただければ、もしかしたら何か分かるかもしれません(分からないかもしれませんが・・・)。
    – ita_3y
    Commented 2015年4月7日 1:03
  • 遅くなり申し訳ありません。ita_3yさん、ありがとうございます。htmlはいじっておらずjsファイルをいじってみました。jsファイルを質問に追記しておきました。よろしくお願いします。
    – AIA
    Commented 2015年4月9日 14:18
  • @AIA 追記ありがとうございます。jsファイルの記述内容はこちらで作成したものと同じですね・・・。もしデバッガでも実機と同じ挙動ならhtml側に何か違いがあるのだと思いますが、手元で実機確認が出来ないので、実機のみで発生している事象だと分からなそうです。せっかく追記していただいたのにお力になれず申し訳ありません。
    – ita_3y
    Commented 2015年4月9日 15:37
  • ita_3yさん。ありがとうございます。いろいろやってみます。
    – AIA
    Commented 2015年4月10日 7:43

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。