Блог

Главная - Вопросы по программированию - Как избежать экранирования при попытке заменить $location.search?

Как избежать экранирования при попытке заменить $location.search?

#javascript #angularjs #url #params

#javascript #angularjs #url-адрес #параметры

Вопрос:

  const createParam = (key, value) => '?' key '=' value;

 const rebuildUrl = (linkUrl, params) => {
    TagsFactory.resetTickerTags();

    console.log('params', params);
    _.each(params, (param)=> {
        linkUrl  = createParam(param.key, param.value);
    });

    console.log('linkUrl', linkUrl);
    // window.location.href = linkUrl;
    $location.search(linkUrl);
};

const checkForStoredLink = () => {
    Util.notEmpty(storedLinkParams) ? rebuildUrl('', storedLinkParams) : null;
};
 
 storedLinkParams = [
    { key: "ticker",
      value: "AAPL" },
    // etc...

Моя функция выше примет массив параметров и сгенерирует строку, подобную этой:
/dashboard?ticker=AAPL?sort=trend?timespan=day?term_id_1=3010695?start_epoch=1473186060?end_epoch=1473358860

Мой текущий URL выглядит так:

http://localhost/static/dashboard/app/#/dashboard?

И как только моя функция выше достигает $location.search строки, она выглядит так, что нарушает пользовательский интерфейс:

http://localhost/static/dashboard/app/#/dashboard??ticker=AAPL?sort=trend?timespan=day?term_id_1=3010695?start_epoch=1473186060?end_epoch=1473358860

Комментарии:

1. почему бы не разграничить параметры с amp; помощью? Если вы используете amp; , вы можете передать .search объект, а не создавать строку самостоятельно

2. const createParam = (key, value) => '?' key.trim() '=' value.trim();

3. @MatthewMcveigh о, так $location.search он ищет объект?

4. @gr3g спасибо, но trim ничего не сделал, строка, которая linkUrl становится, уже чистая. Это то, чем я хочу заменить поиск.

5. @LeonGaban он также может принимать строку, но ожидает, что параметры будут разделены amp;

Ответ №1:

$location.search ожидается, что параметры поиска будут разделены amp; . например

$location.search('param1=value1amp;param2=value2'); результаты в: ?param1=value1amp;param2=value2

$location.search('?param1=value1?param2=value2') результаты: ??param1=value1?param2 .

Если вы начнете использовать amp; для разграничения параметров, ваша жизнь может быть еще проще, вы можете передать объект и избежать любого построения строки:

 $location.search(_.fromPairs(_.map(params, x => [x.key, x.value])));

Пример JsFiddle

Приведенный выше код предполагает _ , что это последняя версия lodash.js , если нет:

 _.each(params, x => $location.search(x.key, x.value));

Пример JsFiddle

Чтобы ответить на вопрос в названии: если вы действительно хотите самостоятельно устанавливать необработанные URL-адреса, решением этого может быть внедрение вашей собственной оболочки window.location , но я бы не рекомендовал

Комментарии:

1. Спасибо, но, черт _.fromPairs возьми, мой URL-адрес не обновляется: (также теперь мой _.each обновляет только первый параметр. Хм, не уверен, что произошло…

2. @LeonGaban Извините fromPairs , пример был неправильным, будет обновлен. Вот еще одно альтернативное решение . Добавлены некоторые скрипты к ответу — надеюсь, это поможет

Метки: