个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 02:01:44 30 4
gpt4 key购买 nike

我有两个状态，A 和 B。

  • 当我通过单击关闭按钮退出状态 A 时，我使用 $state.go 转换到屏幕 A 到状态 B(屏幕 B)
  • 当我通过单击屏幕 A 上的后退浏览器按钮退出状态 A 时，我会随着浏览器 URL 的变化而转换到状态 B(屏幕 B)

    • 在屏幕 A 的 onExit 中，我进行了检查，如果失败，则会打开一个错误对话框，单击错误对话框上的关闭会向 onExit 返回一个失败的 promise

    然而 onExit 仍然继续，我去屏幕 B

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

    最佳答案

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

    下面是一个复选框模拟禁用转换条件的示例。在这种情况下，状态更改(state.go 和导航)会打开一个模态，要求用户接受/拒绝被阻止的转换(某些验证检查的另一个模拟):

    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);
        });
      };

    });
    <!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>

    关于angularjs - 我可以在 onExit 中停止转换到下一个状态吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35203909/

    30 4 0
    文章推荐： CMake虚拟目标取决于其他目标
    文章推荐： ruby-on-rails - 为什么 twitter-bootstrap-rails 生成的 View 使用 model_class.human_attribute_name(:column) instead of just a string?
    文章推荐： WPF native Windows 10 toast
    文章推荐： javascript - 如何将 d3 选择保存在数组中供以后使用 D3.js？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com