2012-09-01 13 views
6

の外ngSwitchで現在のルートを使用することができます。ヘッダはngViewの外にあります。それは可能ですか、またはヘッダーをビューの内側に置く必要がありますか?は、私は、現在のビューに応じて、ページのヘッダーを変更しようとしていますngView

私のコードは次のようになります。それは、ヘッダとコンテンツの異なるコントローラになりますよう

<div id="header"> 
    <div ng-switch on="pagename"> 
     <div ng-switch-when="home">Welcome!</div> 
     <div ng-switch-when="product-list">Our products</div> 
     <div ng-switch-when="contact">Contact us</div> 
    </div> 
    (a lot of unrelated code goes here)  
</div> 

<div id="content> 
    <div ng-view></div> 
</div> 

答えて

1

は思えます。コントローラ間の通信に最適な方法はサービスです。別の方法 - イベント。 See Vojta answer

9

あなたは$locationサービスを注入し、$location.path()をチェックすることができます。 http://docs.angularjs.org/api/ng.$location

JS:

function Ctrl($scope, $location) { 
    $scope.pagename = function() { return $location.path(); }; 
}; 

HTML:あなたはそれを定義する際に

<div id="header"> 
    <div ng-switch on="pagename()"> 
    <div ng-switch-when="/home">Welcome!</div> 
    <div ng-switch-when="/product-list">Our products</div> 
    <div ng-switch-when="/contact">Contact us</div> 
    </div> 
</div> 
10

は、各ルートに名前を付けます。そして、コントローラに$ルートを注入し、その後、コントローラは、現在のスコープにそれを公開しています。あなたは、これはあなたのコントローラで$ルートを注入し、その後、現在のルート名をつかむためにそれを使用するかもしれないです解決するための$ route.current.name

1

素敵aproachにNG-スイッチをバインドすることができます。

app.controller('YourController', function($scope, $route){ 
    $scope.pagename = $route.current.$$route.name; 
}); 

そして、あなたは、次のようなあなたのルートに名前を付ける必要があります:

app.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/product-list', { 
     templateUrl: 'views/product-list.html', 
     controller: 'ProductsController', 
     name: 'product-list' 
     }). 
     when('/home', { 
     templateUrl: 'views/home.html', 
     controller: 'HomeController', 
     name: 'home' 
     }). 
     otherwise({ 
     redirectTo: '/' 
     }); 
    }]); 

あなたがルートをロードするときに、コントローラは、現在のルートの名前を読んで、あなたのページ名の変数にビューに渡します。そして、ビューがそれを拾うし、必要に応じて適切なビューが表示されます。

はそれが役に立てば幸い:)

関連する問題