5

我正在编写一个 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 中。

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

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

1 回答 1

5

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

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

现在，SearchControllerandApplicationController显然是分开的，因此不能访问彼此的属性或方法。然而，他们可以做的是共享工厂/服务或广播信息。为简单起见，我们将让他们共享一个名为SearchService.

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

此处的基本 Plunkr 示例

搜索服务

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

于 2015-02-13T18:32:02.523 回答