Question

我是角色新手，也是UI路由的新手。我的问题是如何在用户路由到新状态时设置条件。我想要的是，当用户提交表单时，它应该通过Mobile OTP弹出窗口进行身份验证，然后再进入下一个状态。在我的代码中，一切正常，直到形式，但当用户提交表单时，otp popup打开但是当它到新状态的路径时它会隐藏。所以我认为我需要在用户进入下一个州时提出一些条件。这是我的代码

// APP.JS FILE

.state('main.step4', {
        url: '/step2/step3/step4',
        templateUrl: 'pages/step4.html'
        }

// Controller.js

$scope.getStep2Form = function($index, selectCarList) {
            $scope.selectCar.step2Form = selectCarList;
            $scope.step2Data = $scope.selectCar;
            console.log($scope.step2Data);
        }
        $scope.getStep3Form = function(step3FormData) {
            $scope.selectCar.step3Data = step3FormData;
            console.log($scope.selectCar);

        }
        $scope.showotp=function(){
            open_modal_menu()
        }

// CUSTOM.js

function open_modal_menu() {
            $('.modal-menu').toggleClass('active-modal-menu');
            $('.modal-menu-overlay').addClass('active-overlay');
        }

// SERVICES.js

angular.module('carmobApp.services', [])

.factory('carListDataFactry', function($http) {

var carListData = [];
return {
  all: function() {
    return $http.get("scripts/content.json").then(function(response) {
      carListData = response.data;
      //console.log(teamListData);
      return carListData;
    });

  },
  get: function(selectCarId) {
    for (var i = 0; i < carListData.length; i++) {
      if (carListData[i].id === parseInt(selectCarId)) {
        //console.log(carListData[i]);
        return carListData[i];
      }
    }
    return null;
  }

};
});

// HTML

<a ui-sref="main.step4" class="button button-green button-full button-icon submitBtn" ng-model="selectCar.step3Data" ng-click="showotp(); getStep3Form(step3FormData)" ng-disabled="selectCarform.$invalid">
    <i class="ion-arrow-right-c" style="color:#fff;"></i> PROCEED NEXT
</a>

Answer 1

你可以使用$ location.path（＆＃34;＆＃34;）;用于在任何路线上重定向。在js文件中你可以使用普通的if和else在UI中你可以使用像ngif（https://docs.angularjs.org/api/ng/directive/ngIf）和ngfor这样的角度指令。

Answer 2

你可以使用这样的东西

app.run(function($transitions) {
  $transitions.onSuccess({}, (transition) => {
  console.log(transition.to())
  console.log(transition.from())
 });
})

并在路线改变时触发

或者渲染问题

在这种情况下，点击打开弹出窗口，您需要发送参数$ event。内部功能

$event.preventDefault()

它可以防止URL中的路由更改。

并在最后一步添加类似

的内容

$state.go('state name')

Answer 3

您可以使用$transition挂钩来捕获页面转换：

$transitions.onStart({to: 'main.step4' }, function(transition) {
    if(!user.isAuthenticated()) //if going to the last step and user is not authenticated
        return false; //abort the transition
});

}

当用户进行身份验证时，您可以使用$state.go('main.step4')并继续正常的行为。

通常$transition用于验证用户是否具有进入下一页的正确权限，如果没有重定向到登录（如果未经过身份验证）或主页（如果未经授权）。

我明白你想要完成的是“即时登录”，我是对的？如果是这种情况，您应该重新考虑您的应用流程，并考虑一个登录状态，它记住您的位置，并知道您想去哪里。

Answer 4

所以，我明白你的问题是你想要在用户提交表格（验证手机号码）后显示自定义弹出窗口，如果点击后点击（OK按钮）你想要路由最后一页（取消按钮）保持在同一路线中。

如何在angularjs中设置UI路径上的条件

4 个答案: