Question

我有两个州，A和B.

当我通过点击关闭按钮退出状态A时，我使用$ state.go转换到屏幕A状态B（屏幕B）
当我通过单击屏幕A上的后浏览器按钮退出状态A时，我会在浏览器URL更改时转换到状态B（屏幕B）

在屏幕A的onExit中，我进行检查，如果此操作失败，则会打开错误对话框，单击错误对话框上的“关闭”将返回对onExit的失败承诺

然而，onExit仍在继续，我转到屏幕B

如果onExit中出现故障，是否可以停止从状态A（屏幕A）到状态B（屏幕B）的转换？

Answer 1

您可以实现实现$stateChangeStart事件处理程序的目标，您可以在需要时取消状态转换（event.preventDefault();）。

以下是checkBox模拟禁用转换条件的示例。在这种情况下，在状态更改（state.go和navigation）上，它会打开一个模式，要求用户接受/拒绝阻止转换（另一个模拟某些验证检查）：

＆＃13;

var myApp = angular.module('myApp', ['ui.router','ui.bootstrap']);

myApp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/state_a');

  $stateProvider
    .state('state_a', {
      url: '/state_a',
      templateUrl: 'stateA.html',
      onEnter: function() {
        console.log("onEnter stateA");
      },
      onExit: function($rootScope, $state) {
        console.log("onExit stateA: "+$rootScope.chk.transitionEnable);
        
      },
      controller: function($scope, $state) {
        $scope.goToStateB = function() {
          $state.go("state_b");
        }
      }
    })
    .state('state_b', {
      url: '/state_b',
      templateUrl: 'stateB.html',
      onEnter: function() {
        console.log("onEnter stateB");
      },
      onExit: function() {
        console.log("onExit stateB");
      },
      controller: function($scope) {
        
      }
    });

});

myApp.controller('mainCtrl', function($rootScope, $scope, $uibModal, $state) {

  $rootScope.chk = {};
  $rootScope.chk.transitionEnable = true;
  
  $rootScope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams, options) {
      if (!$rootScope.chk.transitionEnable) {
        event.preventDefault();
        $scope.toState = toState;
        $scope.open();
      } else {
        console.log("$stateChangeStart: "+toState.name);
      }
  })
  
  $scope.open = function () {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModal.html',
      scope: $scope,
      controller: function($uibModalInstance, $scope) {
          $scope.ok = function () {
            $uibModalInstance.close('ok');
          };
        
          $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
          };
      },
      size: 'sm'
    });

    modalInstance.result.then(function (value) {
      console.info('Modal closed: ' + value);
        
    }, function () {
      console.info('Modal dismissed');
      $rootScope.chk.transitionEnable = true;
      $state.go($scope.toState.name);
    });
  };

});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.17/angular-ui-router.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="myApp" ng-controller="mainCtrl">

  <nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a ui-sref="state_a">State A</a></li>
      <li><a ui-sref="state_b">State B</a></li>
    </ul>
  </nav>

  <div class="container">
    <div ui-view></div>
  </div>

  <script type="text/ng-template" id="myModal.html">
    <div class="modal-header">
      <h3 class="modal-title">Title</h3>
    </div>
    <div class="modal-body">
      Transition to <b>{{toState.name}}</b> is disabled, accept or ignore?
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="ok()">Accept</button>
      <button class="btn btn-warning" type="button" ng-click="cancel()">Ignore</button>
    </div>
  </script>
 
  <script type="text/ng-template" id="stateA.html">
  <div class="jumbotron text-center">
    <h1>state A</h1>
    <p>Example</p>
    
    <a class="btn btn-primary" ng-click="goToStateB()">Goto State B</a>
    <a class="btn btn-danger">Do nothing...</a>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="chk.transitionEnable"> Enable transition
    </label>
    <pre>chk.transitionEnable = {{chk.transitionEnable}}</pre>
  </div>
  </script>
  
  <script type="text/ng-template" id="stateB.html">
<div class="jumbotron text-center">
    <h1>state B</h1>
    <p>The page... </p>
</div>

<div class="container">
    Bla bla
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="chk.transitionEnable"> Enable transition
    </label>
    <pre>chk.transitionEnable = {{chk.transitionEnable}}</pre>
  </div>
</div>
  </script>

</body>

</html>

＆＃13;

Answer 2

我回答了一个类似的问题，你可以阻止状态转换，你可能会发现它很有用

$scope.$on('$stateChangeStart') and $modal dialog

Answer 3

如果逻辑决定转换到state A控制器中的state B，那么@beaver方法肯定会很有效。

但是，如果状态转换到state B需要前提条件为真（无论当前状态如何），那么使用ui-router Resolve可能是一个更清洁的解决方案。

前置条件的业务逻辑可以存在于单独的服务中。

如果需要，此设置还允许angular.module("yourAppModule") .service('StateB_helperService', [ '$q', function($q) { this.allowTransition = function() { var deferred = $q.defer(); // // ... state transition logic ... // // resolves the promise to allow the state transition // rejects otherwise // return deferred.promise; } } ]) ... angular.module("yourAppModule") .config([ '$stateProvider', function($stateProvider) { $stateProvider.state('state_b', { templateUrl: "...", resolve: { stateB_PreCondition: [ 'StateB_helperService', function(StateB_helperService) { return StateB_helperService.allowTransition(); } ] } }) } ])控制器接收已解析的值。由于resolve函数使用promises，因此该过程也可以是异步的。

＆＃13;

const char*

＆＃13;

我可以在onExit中停止转换到下一个状态吗？

3 个答案: