Question

我有一个我使用的指令，如果页面上的表单中有未保存的更改，则会向用户发出警告。

如果他们尝试离开网站或关闭浏览器/标签，我想用默认的浏览器弹出窗口警告用户，但如果用户尝试在网站内导航，则会自定义弹出窗口。

我目前正在尝试在指令中实现一个可以在项目中的任何位置使用的自定义模式。

这是我最初的功能（使用默认浏览器弹出功能）：

.directive('confirmOnExit', function() {
    return {
      link: function($scope, elem, attrs) {
        window.onbeforeunload = function(){
          if ($scope.myForm.$dirty) {
            return "You have unsaved changes, are you sure you want to leave the page?";
          }
        }
        $scope.$on('$stateChangeStart', function(event, next, current) {
          if ($scope.myForm.$dirty) {
            if(!confirm("You have unsaved changes, are you sure you want to leave the page?")) {
              event.preventDefault();
            }
          }
        });
      }
    };
})

以下是我目前正在尝试实施的内容 - 如果在页面外导航或关闭浏览器，则使用本机浏览器弹出窗口，但如果它们保留在站点内，则使用我自己的浏览器弹出窗口。（＆＃39;模板中的间距：＆＃39;供审核）：

.directive('confirmOnExit', function() {
  return {
    restrict: 'E',
    link: function($scope, elem, attrs) {
      window.onbeforeunload = function(){
        if ($scope.myForm.$dirty) {
          return "You have unsaved changes, are you sure you want to leave the page?";
        }
      }
      $scope.$on('$stateChangeStart', function(event, next, current) {
        if ($scope.myForm.$dirty) {
          $scope.showModal = true;
        }
      });
    },
    template: "<div id='myModal' class='modal-background' ng-show='showModal'>
                <div class='modal-window'><div class='btn-group'>
                  <button type='button' class='btn' ng-click='leavePage()'>Yes</button>
                  <button type='button' class='btn' ng-click='stayOnPage()'>No</button>
                </div>
              </div>"
  };
})

虽然我在此代码中没有收到错误，但没有现场更改的弹出窗口。有什么想法吗？

Angular Directive使用自定义模式警告用户页面卸载时未保存的更改

0 个答案: