$ location.path％23＆.hashへのハッシュ変更がうまくいきません。

Question

私は別のページにリダイレクトしたいです。&フォーカスはsome-div-idというidを持つDIVにあるべきです。 私はまた

$location.path('/' + $scope.config_path.school + '/' + 
     $routeParams.someUrl + '/').hash('some-div-id') 

次それが適切なURLを作成してみました

$location.path('/' + $scope.config_path.school + '/' + 
     $routeParams.someUrl + '/#some-div-id') 

次これが正常に動作しているが、

/%23some-div-id #If '#' is not already present in the URL 
/%23some-div-id#some-div-id #If '#' is laready present in the URL 
/#some-div-id 

同様％23 に、それは最初のチェンジ＃試みたが、下にスクロールしないでくださいsome-div-id

を持つ

EDITED

app.run(function($rootScope, $location, $anchorScroll, $routeParams) { 
    $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { 
    setTimeout(function() { 
     if ($location.hash()) { 
     $anchorScroll($location.hash()); 
     } 
    }); 
    }); 
}) 

app.controller('MainCntrl', function($scope, $location, $anchorScroll, $routeParams) { 
}); 

はまた、私は$location.path & $location.url

Answer 1

を試してみました$location.url代わりの$location.pathを使用してみてください。

ドキュメントごとに、$location.pathはパスのみを変更し、$location.urlはパス、検索、ハッシュを変更します。

ので、コードが

pageone状態のURLと #one直接その中にIDとURLを訪れたときにそれを動作させるためにIDも

で、使用され

$scope.goto = function() { 
    $location.url('pageone#one'); 
}; 

ようになります$anchorScroll。 $stateChangeSuccessイベントでは、天気$location.hashが存在するかどうかをチェックしています。存在する場合は$anchorScrollに電話してください。この動作が予想される（URLチェックhttp://run.plnkr.co/plunks/4kJjiMJImNzwLjRriiVR/#/pageoneの変化を見るために）http://plnkr.co/edit/4kJjiMJImNzwLjRriiVR?p=preview

Answer 2

を - コード例

.run(function($rootScope, $location, $anchorScroll,$timeout) { 
    $rootScope.$on('$stateChangeSuccess', 
     function(event, toState, toParams, fromState, fromParams) { 
      $timeout(function() { 
       if ($location.hash()) { 
       $anchorScroll(); 
       } 
      }); 
    }); 
}) 

ようになります。 AngularではデフォルトでURLに #の二重引用符を使用できないため、 #が最初の文字を超えてエスケープされ、 #： http://www.w3schools.com/tags/ref_urlencode.aspのエスケープ文字である %23となります。

あなたの.configブロックに以下を追加してhtml5modeを有効に試みることができる：それはあなたの問題を解決しない、またはあなたがサポートIE8をサポートする必要がある場合は、あなたの最善の策は、おそらくになりたい場合

$locationProvider.html5Mode({ 
    enabled: true 
}); 

$anchorScroll()を使用してください。

Here's the documentation。

のアプリで

、あなたはのidを渡すことができdivあなたのURLのパラメータとして（$routeParamsまたはUI-ルータの$stateParamsを使用）までスクロールし、すぐにそのdivまでスクロールする関数を呼び出したいですページのロード、など：

How to handle anchor hash linking in AngularJS

：

$scope.scrollTo = function(id) { 
    $location.hash(id); 
    $anchorScroll(); 
} 

はまたあなたの特定の問題のために$anchorScroll()を使用する方法の詳細説明については、以下をお読みくださいすなわち、この特定のセクション

：

は、いつものようにあなたの角度のルーティングを設定し、その後、ちょうど次のコードを追加します。

app.run(function($rootScope, $location, $anchorScroll, $routeParams) { 
    //when the route is changed scroll to the proper element. 
    $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { 
    $location.hash($routeParams.scrollTo); 
    $anchorScroll(); 
    }); 
}); 

とあなたのリンクは次のようになります。

<a href="#/test?scrollTo=foo">Test/Foo</a> 

Answer 3

$のlocation.path（ページ）。

あなたはurコントローラの依存関係を$ location、 に追加するだけです。この方法では、エラーなしでこのルートにリダイレクトされます。

Answer 4

ng-bookには、通常の文字を置き換える記号%13があります。 残念ながら、これは別の話題です.RESTを介した$ httpまたはxhr APIコールについて、2つのモード（ここで同じ）があります.1つの通常モードと2つ目のJQueryが好きです。 jqueryはこれらの%13符号をarr[]=1のようなものに追加することが判明しました。

なぜ私はこれを言っていますか？ ソリューションの後には、限界条件をサポートするライブラリと関数が付属しているためです。

あなたの質問の状況は非常に簡単です。 $ locationサービスがあります。これは解決策であり、urlは2つのモード、つまりhashbangであり、hashbangではありません。

jqueryパラメータに問題があり、開発者はjqueryパラメータを通常と交換するためのライブラリを提供していました。 pdfからdocなど、実生活には多くのコンバータがあります。

bookの短い章をご覧ください。

html5モードでは、2つのハッシュをURLに含めることはできませんが、ハッシュバングモードで行うことができます。 ブラウザは、ハッシュバングモードでどのハッシュを使用するかを知ることができません。このサポートはanchorScrollサービスです。

これは、この場合には動作しますが、AnchorScrollProviderを使用してアプリケーションを設定しようとする場合、私はチェックしていません：私は書かれたとして、あなたは（あなたのアプリケーション内の任意の場所に$anchorServiceサービスを注入することができます次に

.config(function($anchorScrollProvider){ 
    $anchorScrollProvider.disableAutoScrolling(); 
}); 

特にsome-div-id divを含むビューにバインドされたコントローラで）このサービスのanchorScroll()機能は、任意の時間に呼び出してください。

これは理論的な答えなので、今はテストできません。

Answer 5

私は前に同じ問題を抱えており、this postが私を助けました。 それが私に知らせてくれないと、あなたを助けてくれることを願って、別の解決策を見つけるのを手伝ってください。

幸運。