首页 > 解决方案 > 阻止页面导航 - SweetAlert

问题描述

我正在尝试用甜蜜的警报对话框替换 JS 框对话框。

在正常情况下,它可以完美运行。

但是,在浏览确认页面时。它没有用。

JS 框:

var confirm = window.confirm("Warning! You may have unsaved data,it will be lost..!" + "\n" + "Are you sure want to leave this page ?");
if (confirm) {
  $scope.$eval(event); //It prevents the page to nav ,until i confirm it.
} else {
  event.preventDefault();
}

有用。

如果是sweetalert,我使用的是相同的场景

$scope.validation = function(event) {
    //....
    sweetAlert({
          title: "Are you sure?", //Bold text
          text: "Your will not be able to recover this imaginary file!", //light text
          type: "warning", //type -- adds appropiriate icon
          showCancelButton: true, // displays cancel btton
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Yes, delete it!",
          closeOnConfirm: false,
          closeOnCancel: false
        },
        function(isConfirm) {
          //Function that triggers on user action.
          if (isConfirm) {
            $scope.$eval(event); //????
            /*  sweetAlert(
                      'Deleted!',
                      'Your file has been deleted.',
                      'success'
                    )*/
          } else {
            event.preventDefault();
          }
        }

对于状态变化,

  .state('ModuleName',{
            url : '/ModuleName',
            templateUrl : 'ModuleMenu/ModuleName.html',
            controller : 'modulectrl',
            resolve : {
                loadPlugin : function($ocLazyLoad) {
                    return $ocLazyLoad
                    .load([
                           {
                               name : 'css',
                               insertBefore : '#app-level',
                               files : [
                                        '../static/vendors/bower_components/nouislider/jquery.nouislider.css',
 ]
                           },
                           {
                               name : 'vendors',
                               files : [
                                       '../static/vendors/bower_components/angular-farbtastic/angular-farbtastic.js' ]
                           },
                           {
                               name : 'ComliveApp',
                               files : [ '../static/scripts/controller/modulectrl.js' ]
                           } ])
                }
            }
    })

在 href 上,加载相应的视图。我的观点是,在 sweetAlert 确认之前不应加载该页面。

建议/答案表示赞赏。

谢谢。

标签: javascriptangularjssweetalert

解决方案


推荐阅读