javascript - 使用 angularJS 在 Ionic 应用程序中的两个页面之间传递值

Question

我是 Ionic 和 Angular 开发的新手，现在我的部分 ionic 应用程序遇到了一些问题。我有两个页面，一个包含一系列下拉选择和一个提交它们的按钮，另一个页面将接收用户选择的选项，处理它们并输出结果。我无法将下拉列表中的值传递到其他页面。

这是下拉列表所在页面的 Controller 。

.controller('mainCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, PassDay) {
$scope.test1 = "tuesday";
$scope.start = "school"
$scope.end = "mall"
}])

这是我想要值转到的页面的 Controller 。我想在加载时将它们分配给该页面中的相应变量。

.controller('timesCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, PassDay) {
$scope.day = "tuesday";
$scope.start = "school";
$scope.end = "town";

我的印象是我需要工厂或服务来做到这一点，但我不知道如何让它发挥作用。每次我尝试使用任何工厂时，它都会使应用程序崩溃。

app.factory('PassDay', function(){
    return 1;
});

这是带有下拉选择的页面的 HTML

<form id="form1" class="list">
            <label class="item item-select" id="select3">
                <span class="input-label">Choose Day</span>
                <select ng-model="test1">
                    <option value="tuesday">Tuesday</option>
                    <option value="friday">Friday</option>
                    <option value="saturday">Saturday</option>
                </select>
            </label>
            <label class="item item-select" id="select1">
                <span class="input-label">Start Location</span>
                <select ng-model="start">
                    <option value="school">school</option>
                    <option value="mall">Mall</option>
                    <option value="train">Train Station</option>
                    <option value="amc">AMC Movies</option>
                    <option value="mall2">Mall2</option>
                    <option value="pav">Pavilion</option>
                    <option value="market">Market Fair</option>
                    <option value="town">town</option>
                </select>
            </label>
            <label class="item item-select" id="select2">
                <span class="input-label">Destination</span>
                <select ng-model="select.end">
                    <option value="mall">Mall</option>
                    <option value="school">school</option>
                    <option value="train">Train Station</option>
                    <option value="amc">AMC Movies</option>
                    <option value="mall2">Mall2</option>
                    <option value="pav">Pavilion</option>
                    <option value="market">Market Fair</option>
                    <option value="town">town</option>
                </select>
            </label>
        </form>

Answer 1

首先，您必须为 timesCtrl 编写正确的路线。

 $state.when("times",
    url: "/times/:day/:start/:end', // Passing state parameters
    templateUrl: 'templates/times.html', // Times template url,
    controller: 'timesCtrl'
 })

然后编写 Controller 如下

.controller('mainCtrl', ['$scope', '$window', function ($scope, $window) {
  $scope.test1 = "tuesday";
  $scope.start = "school"
  $scope.end = "mall"

  $scope.showTimesPage = function() {
    $window.location.href = "#/times/" + $scope.test1 + "/" + $scope.start + "/" + $scope.end
  };
}])

.controller('timesCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
  $scope.day = $stateParams.day;
  $scope.start = $stateParams.start;
  $scope.end = $stateParams.end;
})

点击按钮时调用函数