AngularJS 在屏幕之间发送值答案

【问题标题】：AngularJS sending values between screensAngularJS 在屏幕之间发送值
【发布时间】：2016-04-26 15:49:07
【问题描述】：

我正在使用 Onsen UI、Monaca 和 AngularJS 构建一个跨平台应用程序。

我有 2 个屏幕。第一个是用户必须输入调用 API 的车辆 ID。根据输入的车辆 ID，我想使用此值填充 API URL，并在下一个屏幕上显示所有选项的列表，这些选项基于车辆 ID 作为 JSON 对象返回。

例如，API 调用如下所示：mymadeupdomain/api/vehicle.php?id=109

109 将是用户输入的 ID，以确定将在详细车辆屏幕上显示的内容。

我已经对这些值进行了硬编码，并且可以读回返回的 JSON 对象，但我似乎无法发送用户输入时的值。

vehicle-id.html 表单，从用户那里获取车辆 ID

<form class="login-form" style="text-align: center" name="myForm">
    <section style="padding: 8px">
        <input type="text" 
        class="text-input--underbar" 
        required 
        minlength="3" 
        maxlength="10" 
        ng-model-options="{ debounce : 800 }"
        placeholder="Vehicle ID / Fleet Number" 
        ng-model="fleetIDSearch" >
    </section>
</form>

app.js 是处理表单检查的控制器

angular.module("myApp", ['onsen']).controller("vehicleController", function($scope, $http)
{
    // Watch for changes on the vehicle ID screen
    $scope.$watch('fleetIDSearch', function()
    {
       fetchFleetDetails(); 
    });

    $scope.fleetIDSearch = "";

    function fetchFleetDetails()
    {
        $http.get("http://mymadeupdomain/api/vehicle.php?id=" + $scope.fleetIDSearch).success(function(data)
        {
            $scope.fleetIDs = data;
        });
    }

    // Returns a list of all Vehivle Checks associated with Vehicle ID
    $http.get("http://mymadeupdomain/api/getfleetchecks.php?fleetid=" + $scope.fleetIDSearch).success(function(data) // NOT WORKING HERE
    {
        $scope.checkItemDescriptions = data;
    });
});

如何获取在 $scope.fleetIDSearch = ""; 中输入的值在第一个屏幕中并将它们传递到第二个屏幕中的 API URL？

我想显示与 ID 关联的所有检查的列表，如下所示 - 当 API URL 被硬编码时工作

vehicleCheck.html

<ul class="list">
    <li class="list__item" ng-repeat="checkItemDescription in checkItemDescriptions">
        {{checkItemDescription.checkitemdesc}}
        <label class="switch switch--list-item">
            <input type="checkbox" 
                class="switch__input" 
                checked >
            <div class="switch__toggle"></div>
        </label>
    </li>
</ul>

【问题讨论】：

标签： javascript angularjs onsen-ui monaca

【解决方案1】：

在您的情况下，您可以在多个级别上进行多项选择。

如果你想简单地在控制器之间共享数据，你可以使用Factories

另一种解决方案是：

在首页管理 ng-model
提交表单后，重定向到类似于 /content/:id 的 url
在路由器解析器中管理您的请求（获取远程数据）
直接在其他页面的其他控制器中取结果

【讨论】：