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

Question

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

这是我的路线..

$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 View（2）中单击下一个按钮时，它将再次返回向导（1）而不是协议（3）。我确实在$ state.go之前发出警告，以确保变量使用正确的视图名称更新，是的。一切看起来都不错，但不会去协议视图（3）。

任何帮助将不胜感激。谢谢！

Answer 1

主要问题

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

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

错字

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

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

您有两种选择：

选项＃1 - Plunker

只需从#移除href="#"。

（类似于this answer）

选项＃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);
};

（类似于this answer）