如何在angularjs中设置UI路由条件

我是angular方面的新手，正在研究UI路由。我的问题是如何设置用户路由到新状态时的条件。我想要的是，当用户提交表单时，它应该在进入下一个状态之前通过移动OTP弹出窗口验证表单数据。在我的代码中，在表单之前一切都正常，但当用户提交表单时，otp弹出窗口打开，但当其路由到新状态时，otp被隐藏。所以我认为我需要在用户进入下一个状态时设置一些条件。 这是我的密码

//APP.JS文件

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

};
});

angular.module（'carmobApp.services'，[]）
.factory（'carlistdatafactory'，函数（$http）{
var carListData=[]；
返回{
全部：函数（）{
返回$http.get（“scripts/content.json”）。然后（函数（响应）{
carListData=response.data；
//console.log（teamListData）；
返回数据；
});
},
获取：函数（选择carid）{
对于（变量i=0；i

//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>

下一步

您可以使用$location.path（“”）；用于在任何路线上重定向。在js文件中，您可以使用普通if和else，而在UI中，您可以使用ngif（）和ngfor等角度指令

你可以用这样的东西

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

当路线改变时，它就会开火

或者如果渲染有问题

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

$event.preventDefault() 

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

在最后一步，添加如下内容

$state.go('state name') 

您可以使用钩子捕捉页面转换：

$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'）

并继续正常行为

通常用于验证用户是否有进入下一页的权限，如果没有，则重定向到登录（如果未经验证）或主页（如果未经授权）

---

我知道你想实现的是“即时登录”，对吗？如果是这样的话，你应该重新考虑你的应用程序流程，考虑一种登录状态，它能记住你在哪里，知道你想去哪里。

所以，我理解你的问题是，当用户提交表单（验证手机号码）时，你想显示自定义弹出窗口，然后单击（确定按钮）进行身份验证，你想发送最后一页，如果单击（取消按钮），则保持在同一路线。

您是否有任何Plunker示例说明$transitions在此处做了什么您可以解释lil BIT添加另一个解释您可以查看此Plunker链接（）一次…此问题仍然没有解决。希望这有助于理解我的问题我应该把代码放在哪里？我可以将$state.go（'main.step4'）放在哪个文件中以及在哪里初始化。@TarunKumar您必须将事件放在

中。运行
，在模式关闭后，将
$state.go
置为白色。身份验证完成后，我已经为这个问题创建了plunker（），请立即查看。我照你说的做了，但它不起作用。你能看一下我的代码吗。。Pleaseeee@TarunKumar尝试在
true
和
false
之间更改
app.js
文件中的变量
pass
，以查看转换停止。您缺少Angular和UI路由器的许多关键功能。你发布的plunker永远不会起作用。你真的需要更好地理解这些技术，从更简单的事情开始。做很多教程！我在代码中留下了一些注释，指出了错误所在。。。继续努力！：）我没有遗漏任何东西，我已经更新了你在plunker中需要的东西。我检查了你的代码，但我可以看到你正在发送一个页面。我能做到。我不想要登录页面，我需要弹出的是login.html页面。在这里，我们需要对页面进行身份验证。