与AngularJS指令类似谷歌的搜索框 [英] Google-like search box with an AngularJS directive

问题描述

我写一个应用程序，它的用户界面明智几乎完全像谷歌。我到达着陆页我有一个搜索框，在其中提出将引导您搜索结果页。在这里，你有相同的搜索框和其他指令，可以在其中模式之间进行切换：如。网页，图片。
目前，我有：

I am writing an application which UI wise is almost exactly like Google. I arrive at landing page I have a search box which on submit directs you to results page. Here you have the same search box and other directives in which you can switch between modes: eg. web, image. Currently I have:

目标网页上：与通过在URL中的参数ACTION =results.html的形式

on landing page: form with action="results.html" which passes the parameters in the 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>

这是我只是用NG-提交=输入搜索（）和NG-模型结果。搜索框是searchController内。

on results I am just using ng-submit="search()" and ng-model on the input. The search box is within the searchController.

这是这样做的作为自定义指令，用以下行为正确的方法：

What is the right method for doing this as a custom directive, with the following behaviour:

• 在上登陆页面直接提交到搜索结果页


• 在结果页面中进行搜索无需重新加载页面和位置更改为正确的参数？

推荐答案

我运行，目前我的网站类似的东西。然而，我没有换我搜索到一个指令，因为这是它自己的页面。

I run something similar on my site currently. I however did not wrap my search into a directive because it is it's own page.

有关我怎么有它的设置，我有一个搜索页面 site.com/search （这将是例如您的目标网页），该页面有其自己的控制器/鉴于 SearchController 。在同一页上躺着一个单独的容器中，可以列出基本上是一个数组内的项目。最后，整个页面有一个的ApplicationController 。

For how I have it setup, I have a search page site.com/search (which would be your landing page for example) That page has its own controller/view SearchController. On the same page lies a separate container which can essentially list items that are inside an array. Finally, the entire page has an ApplicationController.

现在，在 SearchController 和的ApplicationController 显然是不同的，因此不能互相访问，其他的属性或方法。然而，他们可以做什么，或者是共享工厂/服务或广播信息。在这个例子中的简单，我们将让他们共享一个称为服务 SearchService 。

Now, the SearchController and ApplicationController are obviously separate and therefore cannot access each-other's properties or methods. What they can do however, is either share a factory/service or broadcast information. For the simplicity of this example we will have them share a service called SearchService.

如果您仍然希望使用一个指令，就可以轻松转动 SearchController 成指令，并使用相同的理念，为你自己。

If you still wish to use a directive, you can easily turn the SearchController into a directive and utilize the same concept for yourself.

基本Plunkr例子下面

SearchService

的 SearchService 将包含搜索有用的属性和方法，但是你现在需要的权利仅仅是一个简单的阵列包含搜索结果列表。

The SearchService will contain useful properties and methods for searching, but all you need right now is just a simple Array to contain a list of search results.

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

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

    return SearchService;
  }
);

---

的ApplicationController

的的ApplicationController 的范围必须 SearchService 的引用，以便您可以使用纳克-repeat 并列出搜索结果的实际内容。

The ApplicationController scope will have a reference to SearchService so that you can use ng-repeat and list out the actual contents of the search results.

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

的 SearchController 的范围也必须 SearchService 的引用，以便它可以修改 SearchService.arrSearchResults 阵列，从而改变究竟会在页面上显示。它还将包含的方法与表单交互。

The SearchController scope will also have a reference to SearchService so that it can modify the SearchService.arrSearchResults array, thus altering what will be displayed on the page. It will also contain methods to interact with the form.

这也将是执行搜索时更改URL位置。

It will also alter the URL location when a search is executed.

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 = [];
            });
    };
}]);

---

页

<!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>

---

标签

有关切换搜索结果（网页，图片等）的类型，你可以创建 SearchService 控制搜索的状态，因此什么类型中的一个变量搜索运行。

For switching the type of search result (web, image, etc) you can create a variable within the SearchService that controls the state of the search, and thus what type of search to run.

SearchService.typeOfSearch =网络; 设置状态，以网​​站，因此可以内进行互动网页和应用程序。

SearchService.typeOfSearch = "web"; This sets the state to web and thus can be interacted within the page and app.

然后，您可以有不同的 NG-重复整个页面不同状态无不显示的结果：

You can then have various ng-repeat throughout the page all showing results for different states:

<!-- 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>

我已经更新了Plunkr证明。

I have updated the Plunkr to demonstrate.

这篇关于与AngularJS指令类似谷歌的搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！