Как создать виджет поиска по сайту на 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 не силён.

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

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 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 7 часов назад
- 50 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 32 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 103 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 94 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 92 просмотра
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- 17 дек.
- 251 просмотр
0

ответов
HTML

Простой
Как записать кол-во успешных прохождений капчи/пароля на js?
- 1 подписчик
- 17 дек.
- 84 просмотра
1

ответ
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- 17 дек.
- 268 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как убрать экспоненциальную запись числа в input type=number?
- 1 подписчик
- 16 дек.
- 94 просмотра
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Придумать альтернативный логотип к уже существующему

23 дек. 2024, в 07:27

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

3д сцены

23 дек. 2024, в 04:30

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

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

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

А что там кривого? ну в контролере
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?

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

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

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