I want to see the alert dialog in the Onsen UI Guide when I press the button.

I am a developer using Monaca.
How do I display the Alert Dialog after tapping the Send button installed below?

<section style="padding:08px8px">
    <ons-button modifier="large" onclick="confirm()">Send</ons-button>
</section>
<section style="padding:08px8px">
    <ons-button modifier="large" onclick="saveData()">Save</ons-button>
</section>

I thought it might be because there is no ng-controller="NotificationController" in the html, so I tried inserting it into the line of the sending tag, but it didn't show up.

It was displayed once, but it was only displayed at the same time as the preview, regardless of the Send button.

The JavaScript file is copied as "dialog.js".
I don't know where the css file is, so I didn't add anything.

Thank you for your cooperation.

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){
          case0:
            ons.notification.alert({
              message: 'You pressed "Cancel".'
            });
            break;
          case1:
            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.'
        });
      }
    });
  }
});

monaca onsen-ui

2022-09-30 13:58

1 Answers

I thought it might be because there is no ng-controller="NotificationController" in html.

The sample alert and confirm are described under NotificationController, so I think this idea is correct.
If you want to place multiple buttons within a page, why don't you put them around <ons-page>?

Also, if the question code onclick="confirm() is set to ng-click="confirm(), the movement may change.
If changing the above does not change anything,

Is "dialog.js" loaded correctly
ons.bootstrap() twice?

I think it would be a good idea to check things like that.

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){
          case0:
            ons.notification.alert({
              message: 'You pressed "Cancel".'
            });
            break;
          case1:
            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-pageing-controller="NotificationController">
  
  <ons-toolbar>
    <div class="center">
      Notifications
    </div>
  </ons-toolbar>

  <h4>ng-click</h4>
  <section style="padding:08px8px">
    <ons-button modulator="large" ng-click="alert()">Alert</ons-button>
  </section>
  <section style="padding:08px8px">
    <ons-button modulator="large" ng-click="confirm()">Confirm</ons-button>
  </section>
  <section style="padding:08px8px">
    <ons-button modulator="large" ng-click="prompt()">Prompt</ons-button>
  </section>

  <h4>onclick</h4>
    <section style="padding:08px8px">
    <ons-button modifier="large" onclick="alert()">Alert</ons-button>
  </section>
  <section style="padding:08px8px">
    <ons-button modifier="large" onclick="confirm()">Confirm</ons-button>
  </section>

</ons-page>

2022-09-30 13:58

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656