angularjs - 角度控制器不显示数据

Question

我是开发 Angular 应用程序的新手。

我有两种看法：

1. Main：搜索元素。
2. 结果：显示查询结果。

搜索器表单位于视图中，并且包含在（主视图和结果）视图中。两个视图都链接到同一个控制器。

问题是当我在主视图中单击搜索时，调用了服务并返回了值，但是结果未显示在结果视图中。

如果我在结果视图中执行相同的查询，一切正常并显示结果。

编码：

主视图和结果包括完全相同的搜索视图：

<div ng-include src="'partials/boat-searcher.html'" class="text-center"></div>

搜索者视图：

<input type="text" ng-model="departure" typeahead="suggestion for suggestion in cities($viewValue)" class="input-xlarge input-height-large" placeholder="Salida" autocomplete="off">

我的应用程序：

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
  config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {    
    $routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'BoatListCtrl'});        
    $routeProvider.when('/option-list', {templateUrl: 'partials/option-list.html', controller: 'BoatListCtrl'});
  }]);

我的控制器：

.controller('BoatListCtrl', function BoatListCtrl($scope, $location, $routeParams, $http, Boat, Equipment, Extra) {
// Departures typeahead
        $scope.departure = undefined;       
        $scope.cities = function(cityName) {            
            return $http.get("http://localhost:3000/departures?query="+cityName).then(function(response){               
                var names = response.data.map(function (source) { return source.name; });                
                return names;
            });
        };      


        // Gets options (boats)
        $scope.getOptionList = function(departure, fechaSalida, fechaLlegada, personas) {                       
            $scope.boats = Boat.query({departure: departure, fechaSalida: fechaSalida, fechaLlegada: fechaLlegada, personas: personas});    
            $location.path('/option-list');                                         
        };

Answer 1

我终于自己解决了。所以，我将解释我是如何做到的：

1. 用查询表查看：

   <form class="form-search">      
   <input type="text" ng-model="departure" typeahead="suggestion for suggestion in cities($viewValue)" class="input-xlarge input-height-large" placeholder="Salida" autocomplete="off">
   // Your form query fields                                
   <button class="btn btn-large btn-primary" ng-click="getOptionList(departure, fechaSalida, fechaLlegada, personas)"><i class="icon-search icon-white icon-small"></i> Buscar</button>                
   

2. 在我的 HomeCtrl 中（这是我查询的控制器，但我想用另一个控制器显示在另一个视图中：

   .controller('HomeCtrl', function HomeCtrl($scope, $location, $http, $filter, Boat, BoatService, SearcherService) {
   
       // Gets options (boats)
       $scope.getOptionList = function(departure, departureDate, arrivalDate, people) {                        
           $scope.formattedDepartureDate  = $filter('date')(departureDate,'yyyy-MM-dd');           
           $scope.formattedArrivalDate = $filter('date')(arrivalDate,'yyyy-MM-dd');              
           $scope.people = people;             
           $scope.boats = Boat.query({departure: departure, departureDate: $scope.formattedDepartureDate, arrivalDate: $scope.formattedArrivalDate, people: $scope.people});               
           BoatService.setBoats($scope.boats);     
           $location.path('/option-list');                                         
       };
   })
   

注意：需要注意的是，我将船只列表添加到范围变量中，并使用 BoatService.setBoats 将其设置在服务中（此服务将可供下一个控制器使用以获取船只。）

1. 我的boat-list.html 视图

   <div class="row-fluid" ng-repeat='boat in boats'>
     {{boat.name}}
     ...
   

2. BoatListCtrl（在另一个视图中显示船只）：

    .controller('BoatListCtrl', function BoatListCtrl($scope, $location, $http, $filter, SearcherService, Boat, BoatService, Equipment, Extra, 
                                                     Rating, Comment, Booking, BookingService) {               
   
       $scope.boats = BoatService.getBoats();
     };