2

コントローラーで URL の一部を使用できるようにしたいのですが、この場合は URL に基づいてボディ クラスを設定できるようにしたいのですが、サービスを使用して json ファイルから他の情報を取得したいと考えています。そのURL。

forループ内で console.log を使用して $scope.pageDetail.id の内容を確認すると、正しい応答が得られますが、 forループの外では「未定義」が返されます。ページのリロードではすべてが機能しますが、ページのナビゲーションを使用して URL をクリックすると機能しません。

私のコントローラー：

oddproto.controller('UrlController', function($scope, $location, PageService){

  // Get page id from URL
  var pageId  = $location.path().replace("/", "");

  $scope.pageDetail = PageService.query(function(data) {
    // Get the correct page details from the dataset
    for (var i = 0; i < data.length; i++) {
      if (data[i].id === pageId) {
        $scope.pageDetail = data[i];
        break;
      }
    }
  });

})

私のサービス

oddproto.factory('PageService', function($resource) {
  return $resource('includes/pages.json');
});

pages.json

[
  {
    "id": "blog",
    "name": "Blogg"
  },
  {
    "id": "cases",
    "name": "Projekt"
  },
  {
    "id": "contact",
    "name": "Kontakt"
  }
]

また、サービスなしでこれを完全に実行しようとしました。 

$scope.pageDetail = $location.path().replace("/", "");

しかし、それはページの読み込みでも機能するだけなので、ここでは $location が問題のようです。他に何が使えるかわかりませんが。

4

2 に答える 2

4

コントローラーが場所の変更を認識していません。コントローラーが初期化されると、ページ ID が設定されますが、変更後、コントローラーは再初期化されません。これには、使用する必要があります

scope.location=$location;
scope.$watch('location.path()', function(path) {
  $scope.pageDetail = ....
});

これは location.path() を監視し、変更されている場合は、カスタム マジックを実行します。

さらに、ボディタグのスタイリングのみを扱うため、コントローラーをディレクティブにすることをお勧めします。

于 2013-05-15T08:04:23.687 に答える