2012-09-01 6 views
6

Próbuję zmienić nagłówek strony w zależności od bieżącego widoku. Nagłówek znajduje się poza ngView. Czy to możliwe, czy też muszę umieścić nagłówek wewnątrz widoku?W AngularJS, czy mogę użyć bieżącej trasy w ngSwitch poza ngView

Mój kod wygląda podobnie do tego:

<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> 

Odpowiedz

1

Wydaje się, jak to będzie różne sterowniki do nagłówka i treści. Najlepszym sposobem komunikacji między kontrolerami jest usługa. Inny sposób - wydarzenia. See Vojta answer.

9

Możesz wprowadzić usługę $location i sprawdzić $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

Daj każdej trasie nazwę podczas definiowania go. Następnie wprowadź $ route do kontrolera, a następnie poproś kontroler, aby opublikował go w bieżącym zasięgu. Następnie możesz powiązać przełącznik ng z $ route.current.name

1

Przyjemnym podejściem do rozwiązania tego problemu może być wstrzyknięcie $ route do kontrolera, a następnie użycie go do pobrania aktualnej nazwy trasy.

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

I trzeba wymienić swoje trasy tak:

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: '/' 
     }); 
    }]); 

Więc kiedy wczytać trasę, kontroler odczyta aktualną nazwę trasy i przekazać je do widoku w zmiennej pagename . Następnie widok podniesie go i wyświetli właściwy widok, zgodnie z potrzebami.

Mam nadzieję, że to pomoże :)