Глобальное окно поиска в угловом

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

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

источник

2013-09-23 chris

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

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

Псевдо ниже.

же 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-23 19:17:49

+1: Пригвоздил его. Спасибо чувак. –

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

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

Быстрое решение - иметь широкоформатный контоллер приложения с $ 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. Два примера

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

Второй шаблон с другой области

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

Обратите внимание, как они оба реализовать | filter: global.search. Всякий раз, когда 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>

источник

2013-09-23 16:00:10

Это похоже на отличное решение. Мой единственный вопрос в том, могу ли я использовать фильтры, чтобы попасть в рельсы api backend с помощью отдыха? – chris

Я не использую рельсы. Я использую python-приложение для сервисов REST и угловатое для интерфейса, все, что мне когда-либо понадобится :). Но да, это было бы с любыми услугами отдыха. Выполните звонок на ваш сервер и залейте $ scope.posts или $ scope.videos с результатом. И тогда будет работать фильтрация. Когда я тестировал это до того, как я разместил его, были с вызовами REST, заполняющими переменные области видимости. –

Я получаю поток, о котором вы сейчас говорите. Я думал больше о том, как отправлять запрос на сервер REST и возвращать выгружаемые результаты, а не загружать сразу все модели и фильтровать их на стороне клиента. – chris

Глобальное окно поиска в угловом

ответ

Смежные вопросы