2012-11-17 10 views
20

ページナビゲーションメニューを表示するコントローラがあります。メニューには項目の配列があり、各項目にはキャプションとリンクがあります。私のテンプレートでロケーションの変更を検出する方法

module.controller('MenuContr', [ 
    /******/ '$scope', '$location', 
    function ($scope, $location) { 
     $scope.items = [ 
      {text: 'page 0', 
      href: '#/page-0', 
      current: $location.path() === '/page-0'}, 
      {text: 'page 1', 
      href: '#/page-1', 
      current: $location.path() === '/page-1'} 
     ]; 

::私はまた、関連するページが現在表示されているかどうかを示す各項目にフラグを設定

私は、メニューの位置の変更を更新できるようにする必要があります
<ul class="menu" ng-controller="MenuContr" ng-cloak> 
    <li ng-repeat="item in items" ng-switch on="item.current"> 
    <span class="current" ng-switch-when="true">{{item.text}}</span> 
    <a ng-switch-default ng-href="{{item.href}}">{{item.text}}</a> 
    </li> 
</ul> 

、どうしたの?私が購読できるイベントはありますか?

EDIT:このコントローラは私のルートに定義されたコントローラに加えて使用され、上記のテンプレートはng-viewディレクティブを含む要素の上に置かれます。

答えて

21

MenuContrに、自分の質問に答えるために:

 $scope.$on('$routeChangeSuccess', function() { 
      var items = $scope.items; 
      var path = $location.path(); 

      for (var i = 0; i < items.length; i++) { 
       var item = items[i]; 
       var href = item['href']; 
       item['current'] = !!href && href.substring(1) === path; 
      } 
     }); 
+1

これに$ scopeと$ rootScopeを使用した場合の違いは何ですか?これがアプリケーション全体で発生する指示文であった場合は、$ rootScopeを使用しますか?ありがとう。 – Winnemucca

0

あなたはルート変更に同じコントローラに来ていますか?あなたはAppsModule.configの$ routeProviderで定義した方法ですか?追加のフィルタリングが必要な場合は、同じコントローラに$ routeParamsを渡すことができます。

コントローラーの開始時にオブジェクトを初期化しました。したがって、リンクが変更されると、同じコントローラが呼び出され、他に何もする必要はありません。選択されたルートに基づいて、アイテムが更新されます。

+0

ありがとう。私は私の質問を編集しました。いいえ、これはルートで使用されているコントローラーにはありません。別々です。 – akonsu

関連する問題