angularjs $ location $ routeproviderを使用するときに正しく更新されない
-
20-12-2019 - |
質問
私は、アプリのヘッダを制御するdefaultController
を持つ角度JSアプリケーションを持っています。それから私はそれぞれのビューに1つずつ他のコントローラを持っています。ビューは<main>
にロードされます。このコードを使用して$routeProvider
を使用してビューをロードします。
myapp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'templates/login.html',
controller: 'loginController'
}).
when('/dashboard', {
templateUrl: 'templates/dashboard.html',
controller: 'dashboardController'
}).
...
.
ロードされたビューがダッシュボードのときにヘッダ内のログアウトボタンを表示し、ロードされたビューがログインビューである場合は非表示にしています。 defaultController
オブジェクトに$location
オブジェクトを持っていることを実行するために、ng-class
を使用してログアウトボタンからクラスを正しく追加および削除します。
問題が1つしかありません。$ locationは、最初にページをロードしたときに正しいパスを表示しますが、変数がもう更新されない場合は、実際に$routeProvider
に表示されます。 /#/dashboard
はまだ$location.url
にあります。ここではコントローラコード:
controllers.controller('defaultController', ['$scope', 'ipCookie', '$location', function($scope, ipCookie, $location) {
$scope.url = $location.url();
...
.
私は同じ結果を持つ/login
でも試みました。
任意のアイデア?
編集:承認された回答の後、これは$window.location.hash
を働かせるためにveを追加する
$scope.$on("$locationChangeSuccess", function() {
$scope.url = $location.url();
});
. 解決
デフォルトのコントローラがロードされた後に、場所はおそらくサービスで更新されます。
$location
サービスをスコープに注入し、それに基づいてテンプレート内の決定を下すことができます(それから自動的に監視され再評価されます)、または$locationChangeSuccess
イベントを聞くことができます。
注入するときは、単に$scope.location = $location
を使用してから<a ng-hide="location.path() != '/something'">
のようなものを使用することができます。
$location
はrootスコープで$locationChangeSuccess
をブロードキャストするので、利用可能な範囲内でそれを聞くことができるはずです.$scope.$on( "$locationChangeSuccess", function() { /* do something */ } );