Javascript 如何在AngularJs中重定向到新路由时显示确认弹出窗口？

当我的angularJs应用程序中有路线更改时，我想显示带有“是”和“否”按钮的确认弹出窗口

我试过这样做。每次更改路线前都会调用此事件，但此函数不会限制用户前往其他路线，即使用户选择了“否”

 $scope.$on('$locationChangeStart', function (event) {
      if (vm.counterObject.myList.length > 0) {
        var answer = confirm("Are you sure?")
        if (answer) {
          event.preventDefault();
        }
      }
    });

---

关于我哪里错了，有什么建议吗？

假设您想显示部分页面中的模式，如下所示

<div ng-controller="MainCtrl" class="container">
  <button ng-click="toggleModal('OK')" class="btn btn-default">Success</button>
  <modal visible="showModal">
      Any additional data / buttons
  </modal>
</div>

---

假设您希望显示部分页面中的模式，如下所示

<div ng-controller="MainCtrl" class="container">
  <button ng-click="toggleModal('OK')" class="btn btn-default">Success</button>
  <modal visible="showModal">
      Any additional data / buttons
  </modal>
</div>

---

终于在我的测试angularjs应用程序中实现了这一点。这是我采用的方法。我决定在这里粘贴整个控制器

编辑：与上一种方法不同的是此函数中操作的OOO顺序。问题是，当我们允许$location.path通过时，我们没有机会及时消化更新。它仍在影响事件侦听器。stopWatchingLocation取消该侦听器，但由于事件的关联，我们必须允许angular对其进行消化

因此，本质上，这使得proceedWithLocationChange函数有所不同：

首先运行以下命令：stopWatchingLocation

然后

它在我的环境中工作得很好

'use strict';
angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope', '$location', '$timeout', function($scope, $location, $timeout) {


$scope.currentLocation = $location.url();
$scope.myList =  [1,2,3]
$scope.$on(
    "$locationChangeSuccess",
    function handleLocationChangeSuccessEvent( event ) {
        $scope.currentLocation = $location.url();
    }
);

var startWatchingTimer = $timeout( startWatchingForLocationChanges, 0, false );
var stopWatchingLocation = null;

function handleLocationChangeStartEvent( event ) {
    event.preventDefault();
    var targetPath = $location.path();
    var targetSearch = $location.search();
    var targetHash = $location.hash();

    if ($scope.myList.length > 0) {
        if (confirm('Leave the page?')) {
            proceedWithLocationChange(targetPath, targetSearch, targetHash)
        }
    } else {
        proceedWithLocationChange(targetPath, targetSearch, targetHash)
    }
}

function proceedWithLocationChange(targetPath, targetSearch, targetHash) {
    stopWatchingLocation();
    $timeout(() => {$location.path( targetPath ).search( targetSearch ).hash( targetHash )},10);
}




function startWatchingForLocationChanges() {
    console.log("watching");
    stopWatchingLocation = $scope.$on( "$locationChangeStart", handleLocationChangeStartEvent );
}

}]);

---

终于在我的测试angularjs应用程序中实现了这一点。这是我采用的方法。我决定在这里粘贴整个控制器

编辑：与上一种方法不同的是此函数中操作的OOO顺序。问题是，当我们允许$location.path通过时，我们没有机会及时消化更新。它仍在影响事件侦听器。stopWatchingLocation取消该侦听器，但由于事件的关联，我们必须允许angular对其进行消化

因此，本质上，这使得proceedWithLocationChange函数有所不同：

首先运行以下命令：stopWatchingLocation

然后

它在我的环境中工作得很好

'use strict';
angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope', '$location', '$timeout', function($scope, $location, $timeout) {


$scope.currentLocation = $location.url();
$scope.myList =  [1,2,3]
$scope.$on(
    "$locationChangeSuccess",
    function handleLocationChangeSuccessEvent( event ) {
        $scope.currentLocation = $location.url();
    }
);

var startWatchingTimer = $timeout( startWatchingForLocationChanges, 0, false );
var stopWatchingLocation = null;

function handleLocationChangeStartEvent( event ) {
    event.preventDefault();
    var targetPath = $location.path();
    var targetSearch = $location.search();
    var targetHash = $location.hash();

    if ($scope.myList.length > 0) {
        if (confirm('Leave the page?')) {
            proceedWithLocationChange(targetPath, targetSearch, targetHash)
        }
    } else {
        proceedWithLocationChange(targetPath, targetSearch, targetHash)
    }
}

function proceedWithLocationChange(targetPath, targetSearch, targetHash) {
    stopWatchingLocation();
    $timeout(() => {$location.path( targetPath ).search( targetSearch ).hash( targetHash )},10);
}




function startWatchingForLocationChanges() {
    console.log("watching");
    stopWatchingLocation = $scope.$on( "$locationChangeStart", handleLocationChangeStartEvent );
}

}]);

---

在AngularJs中，您可以使用run函数监听$stateChangeStart事件并采取措施。正如其名称所指出的，它发生在转换发生之前，您可以取消或重定向到其他位置。这也可以在组件级别完成

angular.module('MyApp').run(canRedirect);
/** @ngInject */
function canRedirect($rootScope, $window, SomeService) {
    const stateChangeStart = $rootScope.$on('$stateChangeStart', (event) => {
        // add your logic and take action
        if (SomeService.hasPermission()) {
            event.preventDefault();
            $window.location = '/path/to/redirect';
        }
    });
    $rootScope.$on('$destroy', canRedirect);
}

---

在AngularJs中，您可以使用run函数监听$stateChangeStart事件并采取措施。正如其名称所指出的，它发生在转换发生之前，您可以取消或重定向到其他位置。这也可以在组件级别完成

angular.module('MyApp').run(canRedirect);
/** @ngInject */
function canRedirect($rootScope, $window, SomeService) {
    const stateChangeStart = $rootScope.$on('$stateChangeStart', (event) => {
        // add your logic and take action
        if (SomeService.hasPermission()) {
            event.preventDefault();
            $window.location = '/path/to/redirect';
        }
    });
    $rootScope.$on('$destroy', canRedirect);
}

---

这是用于选择特定路线，还是您真的想通过此确认截取所有导航？@Kinglish这仅用于特定路线。并非所有导航都适用于选择特定路线，或者您真的想用此确认截取所有导航吗？@Kinglish这仅适用于特定路线。不是所有的导航，我在这个解决方案中面临2个问题。1-我无法访问我的counterObject.myList 2-在导航到“/deals”和导航出“/deals”时调用此解析。而我想在航行时调用它only@BlizZard-全新的答案。看一看，希望能对你有所帮助。我真的很感激你的快速重新编码。我尝试了这个新的解决方案..但它显示了确认弹出窗口..并导航到另一个选项卡，即使我在确认框中单击“是”或“否”，它是否在您选择“是”或“否”之前导航？还是之后？在我选择Yes之后，我在这个解决方案中面临2个问题。1-我无法访问我的counterObject.myList 2-在导航到“/deals”和导航出“/deals”时调用此解析。而我想在航行时调用它only@BlizZard-全新的答案。看一看，希望能对你有所帮助。我真的很感激你的快速重新编码。我尝试了这个新的解决方案..但它显示了确认弹出窗口..并导航到另一个选项卡，即使我在确认框中单击“是”或“否”，它是否在您选择“是”或“否”之前导航？还是之后？在我选择“是”之后