To perform the Use Alert Dialog in the Onsen UI Minimal Template: Onsen UI Minimal Template

I would like to use the alert dialog in the Onsen UI Minimal Template. How can I apply the HTML and JS source code in the Onsen UI Minimal Template to output the alert dialog?

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

</script>

Then the preview screen will be blank

Get rid of this and use page1.html

</ons-page>

immediately preceding the

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

If you just add , the letter 。Alert Confirm Prompt と appears on the screen.

I think it's really rudimentary, but I'd appreciate it if you could give me an answer.

monaca onsen-ui

2022-09-30 20:45

1 Answers

I think I can do it like this.

index.html

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

page1.html

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

You do not need a semicolon of ons.bootstrap(); in the code written in the question.

2022-09-30 20:45

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