Question

我有index.html文件，其中包含以下代码。我想在提交表单时向其他视图searchResult.html显示结果。我在homeCtrl中检索表单数据但是在提交表单时我无法做到将搜索到的数据显示到searchResult.html页面。请帮帮我。

<!DOCTYPE html>
  <html ng-app="myApp">
      <head>
          //head code...
      </head>
      <body  ng-controller="homeCtrl">
        <form  ng-submit="doSearch()">
          <input type="search" placeholder="From" ng-model="search.from">
          <input type="search" placeholder="Destination" ng-model="search.to">
          <button type="submit">Search</button>
      </form>

      <div ng-view></div>
    </body>
 </html>


 var app = angular.module('myApp', [])
 app.controller('homeCtrl', function($scope, $location) {
     $scope.doSearch = function() {
        $scope.search={};
        $scope.search=$scope.search;
        //retrieved data here
     } 
 });

Answer 1

您可以在homeCtrl中获取数据并将其存储在rootscope或localstorage中，然后将页面重定向到搜索页面，并从rootscope或localstorage检索数据到searchCtrl范围。

Answer 2

通过$ rootScope传递数据可能很诱人，但这是有问题的。首先，您的数据现在绑定到根范围，并且不能移动到隔离区。这不仅难以测试，而且如果需要，也不能通过多个应用程序使用。

在单独服务中取出您的搜索逻辑。
使用ui-router进行URL路由。以下链接将有所帮助！

navigation with routing -part1

navigation with routing -part2

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

2 个答案: