Question

问题已根据用户MarkWatson和sdfacre的贡献进行了更新

点击按钮后，我想提交一份表格并在不同的页面上显示结果。但是，我的代码无效。

我正在使用ui-router来改变状态：

$stateProvider.state('first', {
    url: '/first',
    templateUrl: '/first.html',
    controller: 'MainCtrl',
}).state('second', {
    url: '/second',
    templateUrl: '/second.html',
    controller: 'MainCtrl',
})

请注意，我已将状态注入控制器。在这里，我还将状态注入我的提交函数：

$scope.submitForm = function() { 
    server.submitForm($scope.input1, $scope.input2)
    .success(function(data) {
        $scope.results = data;
        $state.go('second');
    }).error(function(err) {
        console.log(err);
    });    
};

HTML表单：

<form name = "myform" ng-submit = "submitForm()">
    ...

    <button type = "submit" ng-click="validationFunction()" class="btn btn-default">Submit and go to another page</button>
</form>

我不想将“$ state.go（'second'）;”放入validationFunction，因为我只希望在提交表单时发生重定向，而不是在验证时。

目前，数据未按预期显示在第二页上。

Answer 1

从$ scope.submitForm = function（$ state）;

中删除$ state

没有注入，它只是覆盖了$ state变量。

Answer 2

当您移动到第二页时，您正在访问另一个$ scope，因此数据不会存在。使用angular注册服务：

app.factory('GlobalState', [function() {
   return {
       results: null
   };
}]);

然后将GlobalState注入您的控制器并设置$ scope.results = GlobalState.results（稍后会详细介绍）：

app.controller('MainCtrl', function MainCtrl($scope, $state, ..., GlobalState) {

   $scope.results = GlobalState.results;

当您提交表单而不是设置$ scope.results时，设置GlobalState.results：

.success(function(data) {
    GlobalState.results = data;
    $state.go('second');

当你转到第二页时，应该根据上面的这一行设置$ scope.results：

$scope.results = GlobalState.results;

Answer 3

有两种方法可以做到正确的方法是创建不同的控制器，你可以将数据发送到url中的下一页，就像这样

＆＃13;

$stateProvider.state('first', {
    url: '/first',
    templateUrl: '/first.html',
    controller: 'MainCtrl',
}).state('second', {
    url: '/second/{data}',
    templateUrl: '/second.html',
    controller: 'someCtrl',
})

＆＃13;

和frm控制器你可以做到这一点

＆＃13;

$state.go('second', { 'test': data});

＆＃13;

并且在另一个控制器上你可以像这样访问url param数据

＆＃13;

  app.controller("someCtrl",['$scope','$stateParams','$http',function($scope,$stateParam,$http){
  
    $scope.somevar=$stateParam.test;
  
     }]);

＆＃13;

我不建议的第二种方法是你可以把数据放在$ rootScope

中

Answer 4

我认为首先应该使用ng-messages或html5验证来验证表单，而不是使用验证函数来检查表单是否有效

<form name = "myform" ng-submit = "myform.$valid ? submitForm(): ''">
...

<button type = "submit" class="btn btn-default">Submit and go to another page</button>

通过这个将会发生的是，表单将仅在DOM中验证，并且在提交表单中您可以重定向到第二页

Angular ui-router提交表单并重定向页面

4 个答案: