web-dev-qa-db-ja.com

Angularjs $ locationサービスは明らかにURLを解析していませんか？

angularは、基本的には検索結果のテーブルであるアプリケーションで使用しています。このテーブルへのアクセスは、_http://myapp/?client=clientName_のようなURLを介して実現できます。

angularコントローラーは、とりわけ、行の詳細を含むモーダルダイアログ（bootstrap-uiで角度ベース）を開くために、テーブルに対してインスタンス化されます。

これらの行の詳細は、両方のコントローラーにいくつかの共通の機能を持つサービスを介してもたらされます：テーブル用とモーダル用です。

今、このサービス内で、次のスニペットを取得しています。

_service.fetchRelatedElements = function(element, cb) {
  var url = '/search.json?results=20&type='+element.type;
  if ($location.search()['client']) {
    url += '&client=' + $location.search('client');
  }
  return doFetch(url, cb); // actual server json GET
};
_

目標は、テーブルにこの特定のclientパラメーターがフィルターとして既に設定されているかどうかを知ることです。

この呼び出しの最初にブレークポイントを置くと、$location.absUrl()が現在のブラウザーのURLを返すことがわかります（私の場合は、興味のあるclientパラメーターがあります）。

しかし、$location.search()は空のオブジェクトを返します。

サービス内に$ locationサービスをデフォルトで注入しています（つまり、.config()呼び出しで構成していません）。そして、docが言うように：

$ locationサービスは、ブラウザーのアドレスバーの（window.locationに基づいて）URLを解析し、アプリケーションでURLを利用できるようにします。

何か不足していますか？この時点で、URLを解析する必要はありませんか？

ありがとう！

PDATE：うまく機能させることができました。問題は、まったくサービスを構成していないことです。そのようにするとデフォルトになると想定していたのでそうしましたが、それはそれが機能する方法ではないようです。

javascriptserviceangularjslocation
31
Pipetus

設定する前に同じ問題が発生していました$locationProviderアプリのモジュール構成：

appModule.config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode(true);
    }]);
43
Riley Lark

ベースタグを指定したくない場合は、require base falseを指定できます。

myapp.config(function($locationProvider) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });
});
11
Pung Worathiti Manosroi

この問題が発生したとき、構成を設定する以外に私のために働いたもう1つのことは、クエリ文字列の前に "＃"を追加することです。

したがって、クエリ文字列を作成している場合は、
_myapp/?client=clientName_
に
_myapp/#?client=clientName_

$ location.search（）で空でないオブジェクトを取得できるようにした後、$location.search()['client']を使用して各パラメーターにアクセスできます

5
Angel Gao

このコメントに基づいて$ window.location.searchを解析する関数を書くことができます https://github.com/angular/angular.js/issues/7239#issuecomment-420475

function parseLocation(location) {
    var pairs = location.substring(1).split("&");
    var obj = {};
    var pair;
    var i;

    for (i in pairs) {
        if (pairs[i] === "")
            continue;

        pair = pairs[i].split("=");
        obj[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }

    return obj;
}

$scope.query = parseLocation($window.location.search)['query'];
3
Archimedes Trajano

$ location.searchのAPIはかなり混乱しています。呼び出す

$location.search('client');

検索オブジェクトを{client：true}に設定し、$ locationを返します。さらに、'client'ではなくタイプミスclientがあるため、検索を空のオブジェクトに設定しています。だからあなたはおそらく欲しい：

url += '&client=' + $location.search()['client'];
3
Jmr