Question

在这个离子应用程序中，我想从搜索页面输入数据，并在下一页显示结果。但是当我尝试它时它不会工作。我可以将搜索结果发送到控制台。并且数据不会传递到下一页，即使我为两个页面制作相同的控制器。请帮我解决这个问题!!谢谢！！

这是我的按钮代码（'searchA'是包含输入数据的对象）

<button type="button"  class="button button-block button-positive" ng-click="search(searchA)" ui-sref="app.MainSearchResult">Search</button>

这些是我的状态（app.js文件）

    .state('app.MainSearch', {
      cache:false, 
      url: '/MainSearch',
      views: {
        'menuContent': {
          templateUrl: 'templates/MainSearch.html',
          controller: 'MainSearchCtrl'
        }
      }
    })

    .state('app.MainSearchResult', {
  url: '/MainSearchResult,
  views: {
    'menuContent': {
      templateUrl: 'templates/MainSearchResult.html',
      controller: 'MainSearchResultCtrl'
    }
  }
})

这是我的搜索功能（controller.js）

  $scope.search = function(searchA){

    console.log('No : '+ searchA.emp_EPF);
    console.log('Name : '+ searchA.emp_Name);
    console.log('Company :'+ searchA.emp_Comp);
    //console.log('qualification Type : ' + emp_qualiType);
    console.log('-------------------');

    $http({
      method: 'GET',
      url: 'http://localhost/mas/Search.php',
      params: {employeeNo : searchA.emp_EPF,
        employeeName : searchA.emp_Name,
        employeeCompany : searchA.emp_Comp,
        employeeBusinessUnit : searchA.emp_BU,
        employeeTeamName : searchA.emp_Team,
        employeeSecondaryCompany : searchA.emp_secondmant,
        employeeRelatedEmployee : searchA.emp_relatedEmp,
        employeeWorkLevel : searchA.emp_workl,
        employeeDesignationName : searchA.emp_designation,
        qualificationType : searchA.emp_qualiType,
        qualificationField : searchA.emp_qualiField,
        programName : searchA.emp_progName,
        serviceProvider : searchA.emp_svcProvider
      }
    }).then(function successCallback(response) {
      $scope.searchResults  = response.data['records'];
      console.log('success :'+ JSON.stringify($scope.searchResults));      

    }, function errorCallback(response) {
      console.log('error',response);
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

    angular.copy($scope.resetData,searchA);

  }

这是下一页的结果集视图。

  <ion-list ng-repeat="x in searchResults">
    <ion-item class="item item-text-wrap"  >
      <div >
        <h2>{{x.employeeNo}}</h2>
        <p>{{x.employeeName}}</p>
          <div>
            <a class="button button-outline button-medium button-positive" >Edit</a>
          </div>
      </div>
    </ion-item>
  </ion-list>

请帮我完成！谢谢！！

Answer 1

一个简单的解决方案是让工厂返回一个对象，让两个页面上的控制器都使用对同一对象的引用

var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
    //Make your search request here.
    return Data;
});
myApp.controller('MainSearchCtrl', function( $scope, Data ){
    $scope.searchResults  = Data;
});
myApp.controller('MainSearchResultCtrl', function( $scope, Data ){
    $scope.searchResults  = Data;
});

在视图/范围/控制器之间共享数据的最简单方法，最简单的方法是将其存储在$rootScope中。

在MainSearchCtrl中，

 $scope.searchResults  = response.data['records'];
 $rootscope.searchResults  = $scope.searchResults;

您也可以在SearchResults页面上使用相同的变量。

如何将搜索页面的搜索结果导入下一页并显示

1 个答案: