javascript - Angular:如何在单个页面应用程序的2个 View 之间传递数据？

这是我第一次尝试Angular.js。我正在尝试创建一个加载一些JSON并显示列表的单页应用程序。当我单击列表中的链接时，它应该转到新页面，并通过JSON数据中的ID更详细地填充该页面。

任何帮助深表感谢。

这是JavaScript（easyjet.js）：

    var app = angular.module('easyjet', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('flights', {
        url: '/',
        templateUrl: 'templates/list.html',
        controller: 'ResultsController'
    })
    .state('details', {
        url: '/detail/:id',
        templateUrl: 'templates/fulldetails.html',
        controller: 'ResultsController'
    });
    $urlRouterProvider.otherwise('/');
});


app.controller('ResultsController', function($scope, $http, $stateParams) {

    console.log($stateParams);

    // Get JSON data
    $http({
        method : "GET",
        url : "http://ejtestbed.herokuapp.com/flights"
    }).then(function(response) {
        $scope.resultsData = response.data;
    }, function(response) {
        $scope.resultsData = response.statusText;
        console.log("Oops! Couldn't load JSON!");
    });

    // Select and display result details
    $scope.selectedResult = null;

    $scope.selectResult = function (result) {
        $scope.selectedResult = result;
    };

    //Sorting default setting
    $scope.order = "flightNumber.number";

});

这是默认的HTML页面：

<!DOCTYPE html>
<html ng-app="easyjet">
    <head>
        <meta charset="utf-8" />
        <title>Easyjet, Flights</title>
    </head>
    <body>
        <div ui-view></div>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="angular-ui-router.min.js"></script>
        <script src="easyjet.js"></script>
    </body>
</html>

模板文件：
1. list.html

<div class="container">

    <!-- Filtering & Sorting -->
    <div>
        <input type="text" id="search" ng-model="search.$" placeholder="Search anything..." />
        <select ng-model="order">
            <option value="flightNumber.number">Flight Number (ASC)</option>
            <option value="-flightNumber.number">Flight Number (DEC)</option>
            <option value="localDepartureTime">Date (ASC)</option>
            <option value="-localDepartureTime">Date (DEC)</option>
        </select>
    </div>

    <!-- Result List -->
    <div class="result"
        ng-repeat="result in filteredResults = (resultsData | filter: search | orderBy: order)"
        ng-style="{ 'background-color': result.id == selectedResult.id ? 'lightgray' : '' }"
        ng-click="selectResult(result)">

        <span style="display:none;">{{ $index }}</span>
        <a ng-href="#/detail/{{ result.id }}"><span>EZY {{ result.flightNumber.number }}</span></a>
        <span>From: {{ result.departureAirport }}</span>
        <span>To: {{ result.arrivalAirport }}</span>
        <span>Date: {{ result.localDepartureTime | date:"longDate" }}</span>
    </div>

    <div ng-show="filteredResults.length == 0">No Result Found</div>

</div>

fulldetails.html

    航班号：{{selectedResult.flightNumber.carrierCode}} {{selectedResult.flightNumber.number}}
    来自：{{selectedResult.departureAirport}}
    前往：{{selectedResult.arrivalAirport}}
    出发航站楼：{{selectedResult.depTerminalName}}
    出发时间：{{selectedResult.localDepartureTime |日期：“ longDate”}}
    到达时间：{{selectedResult.localArrivalTime |日期：“ longDate”}}
    可用座位：{{selectedResult.seatsAvailable}}
    成人票价：{{selectedResult.prices.adult.value}}
    借记卡预订费：{{selectedResult.prices.adult.valueWithDebitCard}}
    信用卡预订费：{{selectedResult.prices.adult.valueWithCreditCard}}
    儿童票价：{{selectedResult.prices.child.value}}
    借记卡预订费：{{selectedResult.prices.child.valueWithDebitCard}}
    信用卡预订费：{{selectedResult.prices.child.valueWithCreditCard}}

最佳答案

您应该使用可以进行呼叫并在页面之间存储数据的服务。

您的控制器将呼叫此服务以获取数据或要求刷新数据。