Как создать виджет поиска по сайту на AngularJS?

Question

Casper Phantom @zcasper

свободный человек

HTML
Angular

Как создать виджет поиска по сайту на AngularJS?

есть файлик layout.php, в котором определены блоки content и rightSide.

<html ng-app="app">
<body>
  <div class=content><div ng-view></div></div>
  <div class="rightSide">
<form class="form-inline" role="form">
    <div class="input-group">
        <input
            type="text"
            name="query"
            class="form-control"
            placeholder="<?= $lang->search_place ?>"
            value="<?=$this->container->request->query('query')?>"
        />
        <span class="input-group-btn">
            <button
                class="btn btn-info"
                ng-controller="SearchCtrl"
                ng-click="setSearch(jQuery('input.form-control[mane=query]').val())"
            >
                <?= $lang->search ?>
            </button>
        </span>
    </div>
</form>
  </div>
</body>
</html>

И соответствующий js(coffeScript) для поиска:

'use strict'

class SearchCtrl
  @$inject: [ '$scope', '$location', '$routeParams', 'SearchService' ]

  constructor: (@scope, @location, @routeParams, @SearchService) ->
    @scope.search_string = @routeParams.query
    this.loadingSearch()


  loadingSearch: ->
    @scope.loadingPromise = @SearchService.getList {q: @scope.search_string}

    @scope.loadingPromise.then (data) =>
      @scope.elements = data

  setSearch: (data) ->
    debugger
    @location.url '/search?query='+data


angular.module('SearchModule').controller 'SearchCtrl', SearchCtrl

Проблема:
При нажатии на кнопку поиск происходит отправка формы средствами html а не angular и соответственно debbuger не срабатывает.

Проблема2:
Как-то криво цепляется $location, может цепляю криво, в JS не силён.

Вопрос задан более трёх лет назад
726 просмотров

6 комментариев

Подписаться 1 Оценить 6 комментариев

Андрей @R0dger
А что там кривого? ну в контролере
app.controller('controllerCategory', ['$scope', '$location', function($scope, $location)

И дальше обращайся к нему.
Написано более трёх лет назад
Casper Phantom @zcasper Автор вопроса

Андрей: TypeError: Cannot read property 'url' of undefined
at n.SearchCtrl.search

Написано более трёх лет назад
lega @lega

Вот пример на Angular Light, можете попробовать light версию ангуляра, если вас замучают ошибки стокового.

Написано более трёх лет назад
Casper Phantom @zcasper Автор вопроса

lega: да проблема в том что location не доступен в search

Написано более трёх лет назад
Андрей @R0dger

Casper Phantom: Так передавайте его - вот хорошая статья - stepansuvorov.com/blog/2014/09/angularjs-data-transfer

Написано более трёх лет назад

Андрей @R0dger

Casper Phantom: Просто обычно в сервисах выполняются какие данные и возвращаются а location надо уже в контроллере... ну у меня вот так сделано

а в контроллере

filterService.search(request).then(function(data){
        if (data.success == true) {
updateView(data, propertyId, check, brand)
}
        });

сервис

app.service("filterService", function($http, $q) {
    return({
        search: search,
    });

    function search(request)
    {
        var sendUrl = "/filter/getFilter/";
        var request = $http({
            method: "post",
            data: {
                request: request
            },
            url: sendUrl
        });
        return(request.then(handleSuccess, handleError));
    }


    function handleError(response) {
        if (
            ! angular.isObject( response.data ) ||
            ! response.data.message
            ) {
            return( $q.reject( "An unknown error occurred." ) );
        }
        return($q.reject(response.data.message));
    }

    function handleSuccess(response) {
        return(response.data);
    }

});

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

3 комментария

Casper Phantom @zcasper Автор вопроса

Доработал как то так:

'use strict'

class SearchCtrl
  @$inject: [ '$scope', '$location', '$routeParams', 'SearchService' ]

  constructor: (@scope, @location, @routeParams, @SearchService) ->
    @scope.search_string = @routeParams.query
    @scope.search = @search

    this.loadingSearch()


  loadingSearch: ->
    @scope.loadingPromise = @SearchService.getList {q: @scope.search_string}

    @scope.loadingPromise.then (data) =>
      @scope.elements = data

  search: ->
    debugger
    @location.url '/search?query='


angular.module('SearchModule').controller 'SearchCtrl', SearchCtrl

и вот так:

<form class="form-inline" role="form" ng-submit="search()" ng-controller="SearchCtrl">
    <div class="input-group">
        <input
            type="text"
            class="form-control"
            ng-model="search_string"
            placeholder="<?= $lang->search_place ?>"
            value="<?=$this->container->request->query('query')?>"
        />
        <span class="input-group-btn">
            <button class="btn btn-info" type="submit"><?= $lang->search ?></button>
        </span>
    </div>
</form>

Написано более трёх лет назад

Casper Phantom @zcasper Автор вопроса

Осталась открытой вторая проблема:

при сабмите срабатывает дебаг (его видно в коде, а после него) -

TypeError: Cannot read property 'url' of undefined
at n.SearchCtrl.search

Написано более трёх лет назад

Casper Phantom @zcasper Автор вопроса

Casper Phantom: конвертированное кофе

SearchCtrl = (function() {
    SearchCtrl.$inject = ['$scope', '$location', '$routeParams', 'SearchService'];

    function SearchCtrl(scope, location, routeParams, SearchService) {
      this.scope = scope;
      this.location = location;
      this.routeParams = routeParams;
      this.SearchService = SearchService;
      this.scope.search_string = this.routeParams.query;
      this.scope.search = this.search;
      this.loadingSearch();
    }

    SearchCtrl.prototype.loadingSearch = function() {
      var _this = this;
      this.scope.loadingPromise = this.SearchService.getList({
        q: this.scope.search_string
      });
      return this.scope.loadingPromise.then(function(data) {
        return _this.scope.elements = data;
      });
    };

    SearchCtrl.prototype.search = function() {
      debugger;
      return this.location.url('/search?query=');
    };

    return SearchCtrl;

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как изменить строчку кода HTML на чужом сайте tampermonkey?
- 2 подписчика
- 14 часов назад
- 220 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- 15 часов назад
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- вчера
- 139 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- 30 апр.
- 89 просмотров
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- 30 апр.
- 83 просмотра
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- 30 апр.
- 100 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- 30 апр.
- 46 просмотров
0

ответов
Angular

+1 ещё

Средний
Как дождаться ответа от сервера для RouteGuard?
- 1 подписчик
- 29 апр.
- 33 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Почему нельзя нажать на кнопку третьего элемента в Splide JS?
- 1 подписчик
- 29 апр.
- 78 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не срабатывает анимация при исчезновение?
- 1 подписчик
- 28 апр.
- 50 просмотров
1

ответ
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Скрипт для оценки ссылки через Virus Total

03 мая 2024, в 02:30

3000 руб./за проект

Переписать бота тг с питона на Go по ветке из гита

03 мая 2024, в 02:03

20000 руб./за проект

Установщик на INNO SETUP

03 мая 2024, в 00:45

1000 руб./за проект

А что там кривого? ну в контролере
app.controller('controllerCategory', ['$scope', '$location', function($scope, $location)

И дальше обращайся к нему.
Андрей: TypeError: Cannot read property 'url' of undefined
at n.SearchCtrl.search
Вот пример на Angular Light, можете попробовать light версию ангуляра, если вас замучают ошибки стокового.
lega: да проблема в том что location не доступен в search
Casper Phantom: Так передавайте его - вот хорошая статья - stepansuvorov.com/blog/2014/09/angularjs-data-transfer
Casper Phantom: Просто обычно в сервисах выполняются какие данные и возвращаются а location надо уже в контроллере... ну у меня вот так сделано

а в контроллере
filterService.search(request).then(function(data){ if (data.success == true) { updateView(data, propertyId, check, brand) } });

сервис
app.service("filterService", function($http, $q) { return({ search: search, }); function search(request) { var sendUrl = "/filter/getFilter/"; var request = $http({ method: "post", data: { request: request }, url: sendUrl }); return(request.then(handleSuccess, handleError)); } function handleError(response) { if ( ! angular.isObject( response.data ) || ! response.data.message ) { return( $q.reject( "An unknown error occurred." ) ); } return($q.reject(response.data.message)); } function handleSuccess(response) { return(response.data); } });

Answer 1 · 2015-11-01 10:22:01

Что то мне кажется Вы намешали
1. Дайте имя формы
2. Инпуту дайте модель
3 Проверяйте средствами Angular

В кратце примерно так (с кофе скиптом не знаком просто)

<form name ="searchForm">
<input type="text" name="search" ng-model="search.name" placeholder="Поиск" required>
<button type="submit" ng-click="search(searchForm.$valid)">Поиск</button>

соответсвенно search.name в контроллере будет Ваша строка поиска. отправляйте получайте и делайте что хотите..

код контроллера
....
$scope.search = function(valid) {
 if (valid) {
Ваш код
...
}
};
</code

Как создать виджет поиска по сайту на AngularJS?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт