Casella di ricerca simile a Google con una direttiva AngularJS

Question

Sto scrivendo un'applicazione che l'interfaccia utente è quasi esattamente come Google. Arrivo alla pagina di destinazione Ho una casella di ricerca che su invia ti indirizza alla pagina dei risultati. Qui hai la stessa casella di ricerca e altre direttive in cui puoi passare da una modalità all'altra: ad es. web, immagine. Attualmente ho:

nella pagina di destinazione: modulo con action = "results.html" che passa i parametri nell'URL.

<form name="search" role="form" action="results.html"> 
    <div class="input-group input-group-search"> 

     <input type="text" class="form-control" ng-model="blab" name="q" required> 
     <span class="input-group-addon"> 
      <button class="btn-search" ng-disabled="search.$invalid"> 
       <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
      </button> 
     </span> 
     <input type="hidden" name="mode" value="web"/> 
    </div> 
</form> 

sui risultati Sto solo utilizzando ng-submit = "search()" e ng-model sull'input. La casella di ricerca si trova all'interno di searchController.

Qual è il metodo giusto per fare questo come una direttiva personalizzato, con il seguente comportamento:

• sulla pagina di destinazione su inviare direttamente alla pagina dei risultati
• Nella pagina dei risultati di fare una ricerca senza ricaricare la pagina e cambia la posizione con i parametri giusti?

Answer 1

Attualmente eseguo qualcosa di simile sul mio sito. Tuttavia non ho avvolto la mia ricerca in una direttiva perché è la sua pagina.

Per come ho impostato, ho una pagina di ricerca site.com/search (che sarebbe la tua pagina di destinazione per esempio) Quella pagina ha il proprio controller/vista SearchController. Nella stessa pagina si trova un contenitore separato che può essenzialmente elencare gli elementi che si trovano all'interno di un array. Infine, l'intera pagina ha un ApplicationController.

Ora, il SearchController e ApplicationController sono ovviamente separati e pertanto non possono accedere alle proprietà o ai metodi degli altri. Tuttavia, ciò che possono fare è condividere una fabbrica/servizio o trasmettere informazioni. Per la semplicità di questo esempio avremo loro condividere un servizio chiamato SearchService.

Se si desidera ancora utilizzare una direttiva, è possibile trasformare facilmente SearchController in una direttiva e utilizzare lo stesso concetto per sé.

Basic Plunkr Example Here

---

SearchService

Il SearchService conterrà proprietà e metodi utili per la ricerca, ma tutto ciò che serve in questo momento è solo un semplice Array per contenere un elenco di risultati di ricerca.

myApp.factory('SearchService', function() { 
    var SearchService; 
    SearchService = {}; 

    // The array that will contain search results 
    SearchService.arrSearchResults = []; 

    return SearchService; 
    } 
); 

---

ApplicationController

L'ambito ApplicationController avrà un riferimento a SearchService in modo da poter utilizzare ng-repeat e la lista fuori il contenuto effettivo dei risultati della ricerca.

myApp.controller('ApplicationController', [ 
    '$scope', 'SearchService', function($scope, SearchService) { 

     // Create a reference to the SearchService and add it to the 
     // $scope so it will be available on the page 
     $scope.searchService = SearchService; 

    } 
]); 

---

SearchController

La portata SearchController avrà anche un riferimento SearchService modo che possa modificare la matrice SearchService.arrSearchResults, alterando così ciò che sarà visualizzato sulla pagina. Conterrà anche metodi per interagire con il modulo.

Modifica anche la posizione dell'URL quando viene eseguita una ricerca.

myApp.controller('SearchController', ['$scope', 'SearchService', '$http', '$location', function($scope, SearchService, $http, $location) { 

    // Your search input 
    $scope.blab = ""; 

    // Your search function 
    $scope.search = function() { 

    // Make sure blab has content (always good to double check) 
    if($scope.blab != "") { 

     // Alter URL to show new request 
     $location.search('q', $scope.blab); 

     // Make a GET request to your URL that will 
     // return data for you to populate 
     $http.get('/someUrl'). 
      success(function(data, status, headers, config) { 

       // this callback will be called asynchronously 
       // when the response is available 

       alert("Search results found!"); 

       // Assuming the data returned is a list of items 
       // or object items 
       // (i.e. [ "Search Result1", "Search Result2", ... ] 
       SearchService.arrSearchResults = data; 

      }). 
      error(function(data, status, headers, config) { 

       // called asynchronously if an error occurs 
       // or server returns response with an error status. 

       alert("Something failed! No results found!"); 

       // Empty the array of search results 
       // to show no results 
       SearchService.arrSearchResults = []; 
      }); 
    }; 
}]); 

---

pagina

<!doctype html> 
<head> 
    <title>Search Example Page</title> 

    <!-- Insert Angular.JS source files here --> 
</head> 
<body ng-controller="ApplicationController" ng-app="myApp"> 

    <!-- ngView --> 
    <div role="main" data-ng-view> 

    </div> 

    <!-- Search Results --> 
    <div ng-repeat="searchItem in searchService.arrSearchResults"> 

     <p style="border-bottom: 2px solid #000">Search Result: <br/>{{searchItem}}</p> 

    </div> 

</body> 
</html> 

---

Tabs

Per commutare il tipo di risultato di ricerca (web, immagini, ecc) è possibile creare una variabile all'interno dello SearchService che cont ripristina lo stato della ricerca e quindi quale tipo di ricerca eseguire.

SearchService.typeOfSearch = "web"; Imposta lo stato su web e quindi può essere interagito all'interno della pagina e dell'app.

Si può quindi avere varie ng-repeat in tutta la pagina tutti i risultati che mostrano per diversi stati:

<!-- Search Results - Web --> 
<div ng-if="searchService.typeOfSearch='web'" ng-repeat="searchItem in searchService.arrSearchResults"> 

    <p style="border-bottom: 2px solid blue">Search Result: <br/>{{searchItem}}</p> 

</div> 


<!-- Search Results - Image --> 
<div ng-if="searchService.typeOfSearch='image'" ng-repeat="searchItem in searchService.arrSearchResults"> 

    <p style="border-bottom: 2px solid red">Search Result: <br/>{{searchItem}}</p> 

</div> 

Ho aggiornato il Plunkr di dimostrare.