如何在提交表单时调用不同的视图？

18 浏览
0 Comments

如何在提交表单时调用不同的视图？

我有一个index.html文件，其中包含以下代码。当提交表单时，我希望在searchResult.html页面上显示结果。我在homeCtrl中检索表单数据，但无法在提交表单时将检索到的数据显示到searchResult.html页面上。请帮帮我。

//head代码...

var app = angular.module('myApp', [])

app.controller('homeCtrl', function($scope, $location) {

$scope.doSearch = function() {

$scope.search={};

$scope.search=$scope.search;

//在此处检索数据

}

});

0

2 答案

0 Comments

当提交表单时，如何调用不同的视图？

问题的原因是想要在提交表单时调用不同的视图。解决方法是在homeCtrl中获取数据，并将其存储在rootscope或localstorage中，然后重定向页面到搜索页面，并从rootscope或localstorage中检索数据到searchCtrl作用域中。

以下是详细的解决方法：

1. 在homeCtrl中获取表单数据。

2. 将获取到的数据存储在rootscope或localstorage中。

3. 使用路由或其他导航方法重定向页面到搜索页面。

4. 在searchCtrl中获取rootscope或localstorage中的数据，并将其存储在searchCtrl作用域中。

5. 使用获取到的数据在搜索页面上展示所需的视图。

以下是一个示例代码，演示如何实现上述解决方法：

// 在homeCtrl中获取表单数据并存储在rootscope中
app.controller('homeCtrl', function($scope, $rootScope) {
  $scope.submitForm = function() {
    // 获取表单数据
    var formData = $scope.formData;
    
    // 将数据存储在rootscope中
    $rootScope.formData = formData;
    
    // 重定向到搜索页面
    $location.path('/search');
  };
});
// 在searchCtrl中获取rootscope中的数据并存储在searchCtrl作用域中
app.controller('searchCtrl', function($scope, $rootScope) {
  // 从rootscope中获取数据
  $scope.formData = $rootScope.formData;
});

通过上述解决方法，当提交表单时，可以调用不同的视图，并在搜索页面上展示相应的数据。

0
0 Comments

问题: 在提交表单时如何调用不同的视图？

原因: 通过$rootScope传递数据可能会很诱人，但这是有问题的。首先，你的数据现在绑定到了根作用域，无法被移动到隔离区域。不仅这样测试起来更困难，而且如果需要的话无法在多个应用程序中使用。

解决方法:

1. 将搜索逻辑放在独立的服务中。

2. 使用ui-router进行URL路由。

以下链接将对你有帮助！

- [导航和路由-第1部分](http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/)

- [导航和路由-第2部分](http://learn.ionicframework.com/formulas/navigation-and-routing-part-2/)

0