Pertanyaan Kotak pencarian global dalam sudut


Saya ingin menerapkan kotak pencarian yang mengubah apa yang ditelusuri berdasarkan pada kontroler mana yang digunakan. Jika Anda berada di "posting" melihatnya akan mencari api pos, jika Anda berada di tampilan video, itu mencari video api. Tampaknya kotak pencarian akan membutuhkan pengontrol sendiri mungkin. Saya cukup yakin saya perlu menyuntikkan layanan pencarian ke semua pengendali model tapi saya tidak yakin bagaimana mengubah url yang dicari atau mengikat masukan ke lingkup pengontrol yang berbeda.

Jadi, setiap ide bagaimana memiliki kotak pencarian global yang berubah di mana ia mencari berdasarkan pada mana pengendali yang memanfaatkannya dan mengikat negara kembali ke tampilan yang berubah?


5
2017-09-23 15:13


asal


Jawaban:


Untuk membuat panggilan dinamik sumber daya, saya pertama-tama akan membuat dua sumber daya $ yang dipetakan ke dua titik akhir, pos, dan video Anda. Kemudian, ajukan sebuah acara perubahan-ng pada pencarian global Anda yang memanggil fungsi dalam pengendali basis Anda.

Fungsi ini pertama-tama perlu mencari tahu apa api untuk mencari. Kemudian buat panggilan api yang sesuai. Bagian penting dalam callback dan saya pikir ini adalah apa yang Anda cari. Dalam callback Anda bisa $ menyiarkan data resp dari permintaan api Anda. Setiap pengontrol Anda akan mendengarkan acara dengan fungsi $ on. Pendengar kemudian akan mengisi variabel lingkup yang benar dengan data panggilan balik.

Pseudo di bawah ini.

Tata letak html yang sama dengan ng-perubahan

<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);
        });


    }

})

Setiap pengontrol anak Anda yang menampilkan hasil.

.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;
    });

})

9
2017-09-23 19:17



Pemfilteran sisi klien.

Jika Anda tidak mencari sesuatu yang gila yang dapat dicapai dengan cara super sederhana untuk pencarian global. Saya bahkan tidak tahu apakah ini akan bekerja jadi saya hanya melakukan tes cepat dan itu berhasil. Tentunya ini dapat diselesaikan dengan cara yang jauh lebih rinci dan terkontrol menggunakan layanan dan menyuntikkannya di mana mereka dibutuhkan. Tapi karena saya tidak tahu apa yang Anda cari, saya akan memberikan solusi ini, jika Anda suka, terima saja. Jika Anda tidak saya mungkin bisa membantu Anda dengan solusi layanan injeksi

Solusi cepat adalah memiliki aplikasi contoller luas dengan $ rootScope ng-model. Mari kita sebut global.search.

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

Untuk masukan penelusuran lebar aplikasi.

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

Dalam parsial terpisah Anda hanya perlu memfilter data berdasarkan global.search ng-model. Dua contoh

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

Template kedua dengan lingkup berbeda

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

Perhatikan bagaimana mereka mengimplementasikan | filter: global.search. Setiap kali global.perubahan penelusuran, filter apa pun dalam tampilan saat ini akan diubah. Jadi posting akan difilter pada tampilan posting, dan video pada tampilan video. Sementara masih menggunakan global.search ng-model yang sama.

Saya menguji ini, itu berhasil. Jika Anda memerlukan detail lebih lanjut menjelaskan konfigurasi dan hierarki kontroler anak, beri tahu saya. Berikut ini adalah tampilan cepat dari template lengkap

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

3
2017-09-23 16:00