Question

我正在尝试在浏览器中刷新特定视图时重定向到主页。如果我在rootScope级别处理stateChangeStart事件，它一切正常并导航到主页。

    var payApp = angular.module('pay', ['ui.router', 'pay.controllers', 'pay.services', 'exceptionOverride']);

    payApp.run(['$templateCache', '$rootScope', '$state', '$stateParams', '$window', '$location', function ($templateCache, $rootScope, $state, $stateParams, $window, $location) {

    $templateCache.put(baseUrl, angular.element('#ui-view').html());

    // Allows to retrieve UI Router state information from inside templates
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

    $rootScope.$on('$stateChangeSuccess', function (event, toState) {

        // Sets the layout name, which can be used to display different layouts (header, footer etc.)
        // based on which page the user is located
        $rootScope.layout = toState.layout;
    });

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {

        //When payment or order page is refreshed, navigate to home
        if (fromState.name == '' && (toState.name == 'payment' || toState.name == 'order')) {
            $location.url('/');
        }
    });

    var windowElement = angular.element($window);
    windowElement.on('beforeunload', function (event) {

        var path = $location.path();

        if (path == '/payment' || path == '/order') {
            event.preventDefault();
        }
    });
}]);

但是我试图将此逻辑移动到特定的控制器级别，因此stateChangeStart事件将仅针对使用此控制器的特定视图触发。

var payControllers = angular.module('pay.controllers', ['ui.bootstrap', 'ngIdle']);

 payControllers.controller('payPaymentCtrl', ['$scope', '$state', '$window', '$location', 'payDataService', 'Idle', 'Keepalive', '$uibModal', 
  function ($scope, $state, $window, $location, service, Idle, Keepalive, $uibModal) {

      var windowElement = angular.element($window);
      windowElement.on('beforeunload', function (event) {

          var path = $location.path();

          if (path == '/payment' || path == '/paymentcreated') {
              event.preventDefault();
          }
      });


    $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {

        //When payment or order page is refreshed, navigate to home
        //Both payment and order share the same controller.
        if (fromState.name == '' && (toState.name == 'payment' || toState.name == 'order')) {
            $location.url('/');
        }
    });

      $scope.paymentOption = service.GetpaymentOption();

      if ($scope.paymentOption == null) {
          //$state.go('home', {}, { reload: true });
          //$location.path('/').replace();
          $location.url('/');
      }
   }]);

在浏览器中刷新视图时，控制器中会触发beforeunload事件，但stateChangeStart不会触发。此外，我试图摆脱控制器级别的stateChangeStart事件，并在缺少某些关键数据时处理主页。它给我一个错误说＆＃34;无法加载undefined＆＃34;的属性。它似乎试图加载一些绑定到角度范围元素的数据，这些数据通常出现在主页上的某些操作中。我需要它看起来就像我在运行应用程序时第一次打开主页时的方式。感谢您的任何建议。

如何在angularjs中处理控制器级别的stateChangeStart事件？

0 个答案: