5

使用されているコントローラーに基づいて検索対象を変更する検索ボックスを実装したいと考えています。「投稿」ビューを使用している場合は投稿 API を検索し、ビデオ ビューを使用している場合はビデオ API を検索します。検索ボックスにはおそらく独自のコントローラーが必要になるようです。すべてのモデルコントローラーに検索サービスを挿入する必要があると確信していますが、検索するURLを変更する方法や、入力をさまざまなコントローラースコープに関連付ける方法が正確にはわかりません。

それで、それを利用しているコントローラーに基づいて検索する場所を変更し、その状態を変化するビューに結び付けるグローバル検索ボックスを作成する方法はありますか?

4

2 に答える 2

9

リソース呼び出しの動的 API を作成するには、最初に 2 つのエンドポイント、投稿、およびビデオにマップする 2 つの $resources を作成します。次に、ベース コントローラーの関数を呼び出すグローバル検索に ng-change イベントを配置します。

この関数はまず、検索する API を特定する必要があります。次に、適切な API 呼び出しを行います。重要な部分はコールバックにあり、これがあなたが探しているものだと思います。コールバックでは、API クエリから resp データを $broadcast できます。各コントローラーは、$on 関数を使用してイベントをリッスンします。リスナーは、正しいスコープ変数にコールバック データを入力します。

以下疑似。

ng-change と同じ HTML レイアウト

<html>

<body ng-controller="AppController">
    <form>
        <label>Search</label>
        <input ng-model="global.search" ng-change="apiSearch()" type="text" class="form-control" />
    </form>

    <div ui-view="posts">
        <div ng-controller="PostController">
            <p ng-repeat="post in posts | filter: global.search">{{ post.name }}</p>
        </div>

    </div>

    <div ui-view="videos">
        <div ng-controller="VideoController">
            <p ng-repeat="video in videos | filter: global.search">{{ video.name }}</p>
        </div>

    </div>

</body>

</html>

AppController

.controller('AppController', function ($scope, PostService, VideoService) {

    $scope.apiSearch = function() {

        // Determine what service to use. Could look at the current url. Could set value on scope
        // every time a controller is hit to know what your current controller is. If you need
        // help with this part let me know.

        var service = VideoService, eventName = 'video';
        if ($rootScope.currentController == 'PostController') {
            service = PostService;
            eventName = 'post';
        }

        // Make call to service, service is either PostService or VideoService, based on your logic above.
        // This is pseudo, i dont know what your call needs to look like.
        service.query({query: $scope.global.search}, function(resp) {

            // this is the callback you need to $broadcast the data to the child controllers
           $scope.$broadcast(eventName, resp);
        });


    }

})

結果を表示する各子コントローラー。

.controller('PostController', function($scope) {

    // anytime an event is broadcasted with "post" as the key, $scope.posts will be populated with the
    // callback response from your search api.
    $scope.$on('post', function(event, data) {
        $scope.posts = data;
    });

})

.controller('VideoController', function($scope) {

    $scope.$on('video', function(event, data) {
        $scope.videos = data;
    });

})
于 2013-09-23T19:17:49.100 に答える
3

クライアント側のフィルタリング。

グローバル検索の非常に簡単な方法で達成できるクレイジーなものを探していない場合. これが機能するかどうかさえわからなかったので、簡単なテストを行ったところ、機能しました。明らかに、これは、サービスを使用して必要な場所に注入する、より詳細で制御された方法で解決できます。しかし、私はあなたが探しているものを正確に知らないので、私はこの解決策を提供します. そうでない場合は、おそらくサービス インジェクション ソリューションでお手伝いできます

簡単な解決策は、$rootScope ng-model を使用してアプリ全体のコントローラーを用意することです。それをglobal.searchと呼びましょう。

    $rootScope.global = {
        search: ''
    };

アプリ全体の検索入力用。

<form>
    <label>Search</label>
    <input ng-model="global.search" type="text" class="form-control" />
</form>

個別のパーシャルでは、global.search ng-model に基づいてデータをフィルタリングするだけです。2 つの例

<p ng-repeat="post in posts | filter: global.search">{{ post.name }}</p>

スコープが異なる 2 番目のテンプレート

<p ng-repeat="video in videos | filter: global.search">{{ video.name }}</p>

どちらも | を実装する方法に注意してください。フィルタ: global.search. global.search が変更されるたびに、現在のビューのフィルターが変更されます。したがって、投稿は投稿ビューでフィルタリングされ、ビデオはビデオ ビューでフィルタリングされます。同じglobal.search ng-modelを引き続き使用しています。

これをテストしましたが、動作します。セットアップと子コントローラーの階層について詳しく説明する必要がある場合は、お知らせください。完全なテンプレートの概要は次のとおりです。

<html>

<body ng-controller="AppController">
    <form>
        <label>Search</label>
        <input ng-model="global.search" type="text" class="form-control" />
    </form>

    <div ui-view="posts">
        <div ng-controller="PostController">
            <p ng-repeat="post in posts | filter: global.search">{{ post.name }}</p>
        </div>

    </div>

    <div ui-view="videos">
        <div ng-controller="VideoController">
            <p ng-repeat="video in videos | filter: global.search">{{ video.name }}</p>
        </div>

    </div>

</body>

</html>
于 2013-09-23T16:00:10.317 に答える