318

AngularJS を使用して URL クエリ パラメータの値を読み取りたいと思います。次の URL で HTML にアクセスしています。

http://127.0.0.1:8080/test.html?target=bob

さすがlocation.searchです"?target=bob"。targetの値にアクセスするためのさまざまな例が Web にリストされていますが、いずれも AngularJS 1.0.0rc10 では機能しません。特に、以下はすべてundefinedです。

  • $location.search.target
  • $location.search['target']
  • $location.search()['target']

誰が何がうまくいくか知っていますか？($locationコントローラーへのパラメーターとして使用しています)

アップデート：

以下に解決策を投稿しましたが、完全に満足しているわけではありません。Developer Guide: Angular Services: Using $locationのドキュメントには、 について次のように記載されています$location。

$location はいつ使用する必要がありますか?

アプリケーションが現在の URL の変更に対応する必要がある場合、またはブラウザで現在の URL を変更する必要がある場合。

私のシナリオでは、ページはクエリ パラメータを使用して外部 Web ページから開かれるため、「現在の URL の変更に反応する」ことはありません。その$locationため、仕事に適したツールではない可能性があります（醜い詳細については、以下の私の回答を参照してください）。したがって、この質問のタイトルを「$location を使用して AngularJS でクエリ パラメータを読み取る方法は?」から変更しました。「AngularJS でクエリ パラメータを読み取る最も簡潔な方法は何ですか?」に。明らかに、javascript と正規表現を使用して を解析することもできますlocation.searchが、非常に基本的なものを低レベルにすることは、私のプログラマーの感性を本当に傷つけます。

$locationだから：私の答えよりも良い使い方はありますか、それとも簡潔な代替手段がありますか？

4

10 に答える 10

200

$routeParams ( ngRoute が必要)をコントローラーに挿入できます。ドキュメントの例を次に示します。

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}

編集: $locationサービス (で利用可能ng)、特にそのsearchメソッド: $location.search()でクエリ パラメータを取得および設定することもできます。

$routeParams は、コントローラーの初期ロード後はあまり役に立ちません。$location.search()いつでも呼び出せます。

于 2012-06-16T14:57:17.570 に答える
191

html5 モードで動作させることができてよかったですが、hashbang モードで動作させることも可能です。

あなたは単に使用することができます：

$location.search().target

「ターゲット」検索パラメータへのアクセスを取得します。

参考までに、動作中の jsFiddle を次に示します: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

var myApp = angular.module('myApp', []);

function MyCtrl($scope, $location) {

    $scope.location = $location;
    $scope.$watch('location.search()', function() {
        $scope.target = ($location.search()).target;
    }, true);

    $scope.changeTarget = function(name) {
        $location.search('target', name);
    }
}
<div ng-controller="MyCtrl">

    <a href="#!/test/?target=Bob">Bob</a>
    <a href="#!/test/?target=Paul">Paul</a>
    
    <hr/>    
    URL 'target' param getter: {{target}}<br>
    Full url: {{location.absUrl()}}
    <hr/>
    
    <button ng-click="changeTarget('Pawel')">target=Pawel</button>
    
</div>

于 2012-07-16T17:56:48.600 に答える
57

私自身の質問に部分的に答えるために、HTML5ブラウザの実用的なサンプルを次に示します。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>
</head>
<body ng-controller="QueryCntl">

Target: {{target}}<br/>

</body>
</html>

重要なのは、上記のように呼び出す$locationProvider.html5Mode(true);ことでした。を開くときに機能するようになりましたhttp://127.0.0.1:8080/test.html?target=bob。古いブラウザでは動作しないという事実には満足していませんが、とにかくこのアプローチを使用する可能性があります。

古いブラウザで機能する別の方法は、html5mode(true)呼び出しをドロップし、代わりにハッシュ+スラッシュを使用して次のアドレスを使用することです。

http://127.0.0.1:8080/test.html#/?target=bob

関連するドキュメントは、開発者ガイド：Angular Services：$ locationの使用にあります（私のグーグル検索でこれが見つからなかったのは不思議です...）。

于 2012-06-17T06:37:15.403 に答える
19

次の 2 つの方法で実行できます。

  1. 使用する$routeParams

最良かつ推奨される解決策は$routeParams、コントローラーで使用することです。ngRouteモジュールをインストールする必要があります。

   function MyController($scope, $routeParams) {
      // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
      // Route: /Chapter/:chapterId/Section/:sectionId
      // $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
      var search = $routeParams.search;
  }
  1. を使用し$location.search()ます。

ここで注意事項があります。HTML5 モードでのみ機能します。デフォルトでは、hash( #)を含まない URL では機能しません。http://localhost/test?param1=abc&param2=def

#/URLを追加することで機能させることができます。http://localhost/test#/?param1=abc&param2=def

$location.search()次のようなオブジェクトを返します。

{
  param1: 'abc',
  param2: 'def'
}
于 2015-07-21T18:40:49.433 に答える
10

$location.search() は、HTML5 モードがオンになっており、サポートしているブラウザーでのみ機能します。

これは常に機能します：

$window.location.search

于 2015-07-11T13:08:57.537 に答える
2

Ellis Whiteheadの答えに対する正確さです。$locationProvider.html5Mode(true);タグを使用してアプリケーションのベース URL を指定する<base href="">か、パラメータrequireBaseをfalse

ドキュメントから：

html5Mode (history.pushState) を使用するように $location を構成する場合は、タグを使用してアプリケーションのベース URL を指定するか、requireBase:false で定義オブジェクトを $locationProvider に渡すことによって、ベース タグを必要としないように $locationProvider を構成する必要があります。 html5モード():

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});
于 2016-02-11T12:44:37.663 に答える
1

$location.$$search.yourparameter を使用することもできます

于 2013-08-05T11:17:00.423 に答える
1

SPA の場合、HTML5Mode は多くの 404 エラーの問題を引き起こすことがわかりました。この場合、$location.search を機能させる必要はありません。私の場合、ユーザーが最初にリンクした「ページ」に関係なく、サイトにアクセスしたときに URL クエリ文字列パラメーターをキャプチャし、ログインしたらそのページに送信できるようにしたいので、すべてをキャプチャします。 app.run にあるもの

$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    if (fromState.name === "") {
        e.preventDefault();
        $rootScope.initialPage = toState.name;
        $rootScope.initialParams = toParams;
        return;
    }
    if ($location.search().hasOwnProperty('role')) {
        $rootScope.roleParameter = $location.search()['role'];
    }
    ...
}

その後、ログイン後に $state.go($rootScope.initialPage, $rootScope.initialParams) と言うことができます

于 2018-01-11T00:51:35.100 に答える
-3

少し遅れましたが、問題はあなたの URL にあったと思います。代わりに

http://127.0.0.1:8080/test.html?target=bob

持っていた

http://127.0.0.1:8080/test.html#/?target=bob

私はそれがうまくいったと確信しています。Angular はその #/ について本当にうるさいです

于 2016-03-10T16:49:00.797 に答える