angularjscordovanotificationsonsen-uiauto-close

onsen notification to auto close after a set time


Hi I am using Onsen as part of a AngularJS Phonegap/Cordova project.

I was wondering is it possible to to automatically close an Onsen notification after a set time. Also is it possible to not include the button?

My current notification is shown below:

var notifyAutoClose = function(title, message) {
        var options = {
            title: title,
            message: message,
            buttonLabel: '', //Don't show button if possible
            animation: 'default'
        };
        ons.notification.alert(options);            
    }

If it is not possible what would be the best non-bootstrap alternative when using AngularJS.

Thank you so much for your time!


Solution

  • You should create a custom dialog using ons-dialog directive.

    Check this code (demo):

    //HTML
    <ons-page>
        <ons-toolbar>
          <div class="center">Dialog</div>
        </ons-toolbar>
        <ons-list ng-controller="DialogController">
          <ons-list-item ng-click="show('customdialog.html','Dialog title', 'it will close after 2 seconds')" modifier="tappable">
             Custom dialog
          </ons-list-item>
       </ons-list>
    </ons-page>
    
    <ons-template id="customdialog.html">
       <ons-dialog var="dialog" modifier="android">
         <ons-toolbar modifier="android">
           <div class="center">{{title}}</div>
         </ons-toolbar>
         <p style="text-align:center;margin-top:50px">{{message}}</p>
      </ons-dialog> 
     </ons-template>
    
    //JAVASCRIPT
    ons.bootstrap()
    .controller('DialogController', function($scope) {
       $scope.show = function(dlg,title,message) {
          $scope.title=title;
          $scope.message=message;
         ons.createDialog(dlg,{parentScope:$scope}).then(function(dialog) {
            dialog.show();
         });
         setTimeout(function(){dialog.hide()},2000)
       }
     });