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

【问题标题】：Passing values between two pages in an Ionic application using angularJS使用 angularJS 在 Ionic 应用程序中的两个页面之间传递值
【发布时间】：2017-03-31 09:36:45
【问题描述】：

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

这是下拉菜单所在页面的控制器。

.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('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>

【问题讨论】：

有一些选项，例如 Factory 。 Localstorage .make fiddle 或 pen 然后会检查

标签： javascript html angularjs web-applications ionic-framework

【解决方案1】：

首先你必须为timesCtrl写正确的路线。

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

然后编写控制器如下

.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;
})

点击按钮调用函数

【讨论】：