带有 AngularJS 指令的类似于 Google 的搜索框

Question

我正在编写一个 UI 与 Google 几乎一模一样的应用程序。我到达了着陆页，我有一个搜索框，在提交时会将您定向到结果页面。这里有相同的搜索框和其他指令，您可以在其中切换模式：例如。网络, 图片. 目前我有：

在着陆页上：带有 action="results.html" 的表单在 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-submit="search()" 和 ng-model。搜索框在 searchController 中。

作为自定义指令执行此操作的正确方法是什么，具有以下行为：

在登陆页面上直接提交到结果页面
在结果页面上进行搜索而不重新加载页面并将位置更改为正确的参数？

Answer 1

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

关于我的设置方式，我有一个搜索页面 site.com/search（例如您的目标网页）该页面有自己的 controller/view SearchController。在同一页面上有一个单独的容器，它基本上可以列出数组中的项目。最后，整个页面都有一个ApplicationController.

现在，SearchController 和 ApplicationController 显然是分开的，因此无法访问彼此的属性或方法。但是，他们可以做的是共享 factory/service 或广播信息。为简单起见，我们让他们共享一个名为 SearchService.

的服务

如果您仍想使用指令，可以轻松地将 SearchController 转换为指令并自己使用相同的概念。

Basic Plunkr Example Here

搜索服务

SearchService 将包含有用的搜索属性和方法，但您现在只需要一个简单的 Array 来包含搜索结果列表。

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

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

    return SearchService;
  }
);

应用程序控制器

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

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 范围也将引用 SearchService，以便它可以修改 SearchService.arrSearchResults 数组，从而改变页面上显示的内容。它还将包含与表单交互的方法。

它还会在执行搜索时更改 URL 位置。

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 中创建一个变量来控制搜索的状态，从而控制搜索的类型运行.

SearchService.typeOfSearch = "web"; 这会将状态设置为 web，因此可以在页面和应用程序中进行交互。

然后您可以在整个页面中使用各种 ng-repeat 来显示不同状态的结果：

<!-- 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 来演示。

带有 AngularJS 指令的类似于 Google 的搜索框

Google-like search box with an AngularJS directive

javascript

angularjs

angularjs-directive

angularjs-ng-form