2013-10-04 138 views
0

我很新手開發一個Angular應用程序。角度控制器不顯示數據

我有兩個觀點:

  1. 主營:搜索元素。
  2. 結果:顯示查詢結果。

搜索表單處於視圖中,並且它包含在兩個(主要和結果)視圖中。兩個視圖都鏈接到同一個控制器。

問題是當我在主視圖中單擊搜索時,服務被調用並返回值,但結果不顯示在結果視圖中。

如果我在結果視圖中執行相同的查詢,則一切正常,並顯示結果。

的代碼:

主視圖和結果包括完全相同seacher視圖:

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

回答

0

我終於自己解決了。所以,我將解釋我是如何做到了:

  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. 我的船,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(); 
        };