5

私は、UI に関しては Google とほぼ同じアプリケーションを作成しています。ランディング ページに到着しました。検索ボックスがあり、送信すると結果ページに移動します。ここには、モードを切り替えることができる同じ検索ボックスとその他のディレクティブがあります。ウェブ、画像。現在私は持っています：

ランディング ページ: URL でパラメーターを渡す action="results.html" を含むフォーム。

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

現在、SearchControllerとApplicationControllerは明らかに分離しているため、互いのプロパティやメソッドにアクセスできません。ただし、彼らができることは、工場/サービスを共有するか、情報をブロードキャストすることです。この例を簡単にするために、 というサービスを共有しますSearchService。

それでもディレクティブを使用したい場合は、簡単に をSearchControllerディレクティブに変更して、同じ概念を自分で利用できます。

基本的な Plunkr の例はこちら

検索サービス

にはSearchService、検索に役立つプロパティとメソッドが含まれますが、今必要なのは、単純Arrayに検索結果のリストを含めることだけです。

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

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

    return SearchService;
  }
);

アプリケーションコントローラー

検索結果の実際の内容を使用して一覧表示できるようにApplicationController、スコープには への参照があります。SearchServiceng-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>

タブ

検索結果のタイプ (Web、画像など) を切り替えるために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 に答える