Google-comme champ de recherche avec un AngularJS directive
Je suis en train d'écrire une application d'INTERFACE utilisateur sage est presque exactement comme Google. J'arrive à la page d'atterrissage, j'ai une boîte de recherche qui sur "soumettre" vous dirige vers la page de résultats. Ici vous avez la même zone de recherche ainsi que d'autres directives dans laquelle vous pouvez basculer entre les modes: par exemple. web, de l'image.
Actuellement, j'ai:
sur la page de destination: form action="results.html" qui transmet les paramètres dans l'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>
sur les résultats, je suis juste en utilisant ng-submit=recherche"()" et ng-modèle à l'entrée. La zone de recherche est à l'intérieur de la searchController.
Quelle est la bonne méthode pour faire cela comme une coutume de la directive, avec le comportement suivant:
- Sur la page de destination sur soumettre direct à la page de résultats de
- Sur la page résultats de procéder à une recherche sans avoir à recharger la page et de changer l'emplacement pour les bons paramètres?
OriginalL'auteur Ela | 2015-02-13
Vous devez vous connecter pour publier un commentaire.
Je lancer quelque chose de similaire sur mon site actuellement. J'ai cependant ne pas envelopper ma recherche dans une directive, car elle est sa propre page.
Pour la façon dont je l'ai d'installation, j'ai une page de recherche
site.com/search
(ce qui serait votre page d'atterrissage par exemple) Que la page a son propre contrôleur/vueSearchController
. Sur la même page se trouve un récipient séparé qui peut essentiellement les éléments de la liste qui sont à l'intérieur d'un tableau. Enfin, l'ensemble de la page a unApplicationController
.Maintenant, le
SearchController
etApplicationController
sont évidemment distincts et, par conséquent, ne peuvent pas accéder à d'autres propriétés ou méthodes. Ce qu'ils peuvent faire, cependant, est de partager un factory/service ou de diffusion de l'information. Pour la simplicité de cet exemple, nous allons partager un service appeléSearchService
.Si vous souhaitez toujours utiliser une directive, vous pouvez facilement tourner la
SearchController
dans une directive et d'utiliser le même concept pour vous-même.De Base Plunkr Exemple Ici
SearchService
La
SearchService
va contiennent des propriétés et des méthodes pour la recherche, mais tous vous avez besoin est juste un simpleArray
contient une liste de résultats de recherche.ApplicationController
La
ApplicationController
portée de disposer d'une référence àSearchService
de sorte que vous pouvez utiliserng-repeat
et liste le contenu réel des résultats de la recherche.SearchController
La
SearchController
champ d'application permettra également de disposer d'une référence àSearchService
afin qu'il puisse modifier leSearchService.arrSearchResults
tableau, modifiant ainsi ce qui sera affiché sur la page. Il contient également des méthodes pour interagir avec le formulaire.Il va également modifier l'emplacement de l'URL lorsqu'une recherche est exécutée.
La Page
Onglets
Pour la commutation du type de résultat de recherche (web, image, etc), vous pouvez créer une variable à l'intérieur de la
SearchService
qui contrôle l'état de la recherche, et donc, ce type de recherche à exécuter.SearchService.typeOfSearch = "web";
Ce définit l'état deweb
et donc peut être en interaction à l'intérieur de la page et l'application.Vous pouvez avoir différents
ng-repeat
tout au long de la page montrant des résultats différents états:J'ai mis à jour le Plunkr à démontrer.
Si ma réponse vous a aidé, s'il vous plaît sélectionner. Aussi loin que les onglets aller (aller à la recherche sur le web, la recherche d'images, etc...) Vous pouvez disposer d'un ensemble de l'état dans le
ApplicationController
qui peuvent être modifiés par votre application. Cet état peut alors charger des résultats différents pour vos recherches. Je vais régler ma réponse à montrer l'exemple...j'ai de très exigence similaire pour mon projet. Ici je n'ai pas compris où sur modifier l'événement est géré par le texte de la recherche? aussi à partir d'où les suggestions sont peupler. Pouvez s'il vous plaît ellobrate sur elle.
Hey @DeveshAgrawal autant que l'événement de changement de cuisson à partir de la recherche d'entrée de texte, je ne pense pas que j'ai mis en place ici, mais il y a deux façons d'aller à ce sujet. $scope.$montre Vous pouvez utiliser le
scope
pour écouter les changements d'une variable, dans ce cas, il serait$scope.$watch('q', function(newVal, oldVal) { ... });
AngularJS Portée ng-modifier L'autre façon de regarder pour la saisie de texte changements serait d'utiliser ng-changement="aScopeFunc()" AngularJS ngChangeLes suggestions sont remplies lorsque l'utilisateur appuie sur le Recherche bouton qui, selon l'état de la recherche, soit de saisir les résultats de
results-web.json
ouresults-image.json
. Le Plunkr exemple n'ont pas de logique à appliquer le terme de recherche pour la recherche proprement dite que c'est juste un exemple de la démonstration, mais l'idéal serait de disposer d'un service back-end d'installation pour exécuter une requête sur le terme de recherche et de retourner un Objet JSON avec les résultats. Espérons que cela vous aide Devesh!OriginalL'auteur Pixxl