Хобрук: Ваш путь к мастерству в программировании

Поле глобального поиска в angular

Я хочу реализовать окно поиска, которое изменяет то, что оно ищет, в зависимости от того, какой контроллер используется. Если вы находитесь в представлении «сообщения», он будет искать API сообщений, если вы находитесь в представлении видео, он ищет API видео. Кажется, окну поиска может понадобиться собственный контроллер. Я почти уверен, что мне нужно внедрить службу поиска во все контроллеры модели, но я не совсем уверен, как изменить URL-адрес, который он ищет, или связать ввод с различными областями контроллера.

Итак, есть идеи, как иметь глобальное поле поиска, которое меняет место поиска в зависимости от того, какой контроллер использует его и привязывает свое состояние обратно к изменяющемуся представлению?

23.09.2013

Ответы:


1

Чтобы сделать вызов ресурса динамическим API, я бы сначала создал два ресурса $, которые сопоставляются с двумя вашими конечными точками, сообщениями и видео. Затем поместите событие ng-change в свой глобальный поиск, который вызывает функцию в вашем базовом контроллере.

Эта функция сначала должна выяснить, какой API искать. Затем сделайте соответствующий вызов API. Важная часть находится в обратном вызове, и я думаю, что это то, что вы ищете. В обратном вызове вы можете $транслировать данные resp из вашего запроса API. Каждый из ваших контроллеров будет прослушивать событие с помощью функции $on. Затем слушатели заполнят правильную переменную области данными обратного вызова.

Псевдо ниже.

Тот же макет html с ng-change

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

Контроллер приложений

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

})
23.09.2013

2

Фильтрация на стороне клиента.

Если вы не ищете ничего сверхъестественного, этого можно добиться очень простым способом глобального поиска. Я даже не знал, сработает ли это, поэтому я просто провел быстрый тест, и он работает. Очевидно, что это можно было бы решить гораздо более детально и контролируемо, используя сервисы и внедряя их туда, где они нужны. Но поскольку я точно не знаю, что вы ищете, я предоставлю это решение, если вам оно нравится, примите его. Если вы этого не сделаете, я, вероятно, мог бы помочь вам с сервисным инъекционным решением.

Быстрое решение состоит в том, чтобы иметь контроллер для всего приложения с $rootScope ng-model. Назовем его global.search.

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

Для ввода широкого поиска приложения.

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

В отдельных частях вам просто нужно отфильтровать данные на основе ng-модели global.search. Два примера

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

Второй шаблон с другой областью действия

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

Обратите внимание, как они оба реализуют | фильтр: глобальный.поиск. Всякий раз, когда global.search изменяется, любые фильтры в текущем представлении будут изменены. Таким образом, сообщения будут фильтроваться при просмотре сообщений, а видео — при просмотре видео. Все еще используя ту же модель global.search ng.

Я проверил это, это работает. Если вам нужны более подробные сведения об установке и иерархии дочерних контроллеров, дайте мне знать. Вот краткий обзор полного шаблона

<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>
23.09.2013
  • это кажется отличным решением. Мой единственный вопрос: могу ли я использовать фильтры для доступа к бэкэнду rails api с помощью отдыха? 23.09.2013
  • Я не использую рельсы. Я использую движок приложения python для служб REST и angular для внешнего интерфейса, все, что мне когда-либо нужно :). Но да это бы с любыми остальными услугами. Сделайте вызов на свой сервер и заполните $scope.posts или $scope.videos результатом. И тогда фильтрация будет работать. Когда я тестировал это, прежде чем публиковать, это было с вызовами REST, заполняющими мои переменные области. 23.09.2013
  • Я понимаю поток, о котором вы сейчас говорите. Я больше думал о том, чтобы отправить запрос на серверную часть REST и вернуть выгруженные результаты вместо того, чтобы загружать все модели сразу и фильтровать их на стороне клиента. 23.09.2013
  • о, вы имеете в виду, что ваш глобальный поиск будет отправлять запрос на другую конечную точку в зависимости от того, на какой странице вы находитесь? Если это так, я извиняюсь, мой ответ не будет иметь отношения к чему-то подобному. 23.09.2013
  • Да об этом я и говорил 23.09.2013
  • Ну, это отстой, я полностью думал, что вы имели в виду клиентскую сторону. Я опубликую что-нибудь быстрое для серверной части. 23.09.2013
  • Я добавил новый ответ для выполнения этой серверной части. Пожалуйста, дайте мне знать, если это то, что вы искали. 23.09.2013
  • Новые материалы

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..

    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..

    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..

    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..