Angular 来自控制器的 JS $state 条件不工作

Question

我有一个 AJS 向导，它有大约 10 个视图。根据用户选择和其他参数，我的控制器决定下一个视图并设置 $state.go('new view')。但代码似乎无法正常工作。不过不确定问题所在。

这是我的路线..

$stateProvider

    // route to show our basic form (/form)
    .state('form', {
        url: '/form',
        templateUrl: 'form.html',
        controller: 'formController'
    })
    .state('form.wizard', {
        url:'/wizard',
        templateUrl: 'wizard/wizardSelection.html'
    })
    .state('form.submitorg', {
        url:'/submitPartner',
        templateUrl: 'wizard/submitOrgForm.html'
    })
    .state('form.agreements', {
        url:'/agreements',
        templateUrl: 'wizard/selectAgreement.html'
    })
... more routing goes here

我的控制器逻辑在这里

controller('formController', function($scope, $state) {

$scope.getNextView = function(viewNumber){

    var viewState = 'form.error';

    if(viewNumber == 1){
       viewState = 'form.submitOrg'
    }
    else if(viewNumber == 2){
         viewState = 'form.agreements'
    }
    else if(viewNumber == 3){
         viewState = 'xxxx'
    }
    else if(viewNumber == 4){
         viewState = 'yyyyy'
    }
    else if(viewNumber == 5){

        if($scope.formData.Modeltype == 'C'){
              viewState = 'form.setupanother'
         }
        else{
              viewState = 'form.submitnew'
        }
    }

    $state.go(viewState, {});  
};

在我的 html 视图中，我有一个按钮，它与控制器调用绑定。这是它的写法

第一次观看

<a href="#" class="btn btn-block btn-info" ng-click="getNextView(1)">

第二个视图

    <a href="#" class="btn btn-block btn-info" ng-click="getNextView(2)">

我能够从向导视图 (1) 移动到 submitOrg 视图 (2)。但是，当我从 submitOrg 视图 (2) 单击下一步按钮时，它将再次返回到向导 (1) 而不是协议 (3)。我确实在 $state.go 之前放置了警报，以确保使用正确的视图名称更新变量，是的。一切看起来都很好，但不会进入协议视图 (3)。

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

主要问题

您的 $state.go(viewState, {}); 正在被您的 HTML 的 href"#" 覆盖。

这会触发您应用的 $urlRouterProvider.otherwise(viewState);。

打字错误

此外，您需要像这样将 .state('form.submitorg' 中的 o 大写：

.state('form.submitOrg', {
  url: '/submitPartner',
  templateUrl: 'submitOrgForm.html'
})

您有两个选择：

选项 #1 - Plunker

只需从 href="#" 中删除 #。

（类似于）

选项 #2 - Plunker

像这样将 $event 传递到您的 ng-click 中：

<a href="#" class="btn btn-block btn-info" ng-click="getNextView(1, $event)">View #1</a>

然后在控制器的 $scope.getNextView 函数中添加 $event.preventDefault();，如下所示：

$scope.getNextView = function(viewNumber, $event) {
    $event.preventDefault(); // prevents href from overriding $state.go
    var viewState = 'form.error';
    if (viewNumber == 1) {
        viewState = 'form.submitOrg'
    } else if (viewNumber == 2) {
        viewState = 'form.agreements'
    } else if (viewNumber == 3) {
        viewState = 'xxxx'
    } else if (viewNumber == 4) {
        viewState = 'yyyyy'
    } else if (viewNumber == 5) {
        if ($scope.formData.Modeltype == 'C') {
            viewState = 'form.setupanother'
        } else {
            viewState = 'form.submitnew'
        }
    }
    $state.go(viewState);
};

（类似于）

Angular 来自控制器的 JS $state 条件不工作

Angular JS $state conditional from controller is not working

angularjs

routing

angularjs-routing

angularjs-ng-click

主要问题

打字错误

选项 #1 - Plunker

选项 #2 - Plunker