2012-09-01 2 views
6

현재보기에 따라 페이지 머리글을 변경하려고합니다. 헤더가 ngView 외부에 있습니다. 그럴 수 있습니까 또는 뷰 내부에 헤더를 넣어야합니까?AngularJS에서 ngView 외부의 ngSwitch에서 현재 경로를 사용할 수 있습니까

내 코드는 다음과 유사합니다 : 그것은 헤더와 내용에 대해 서로 다른 컨트롤러 것 같은

<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를 컨트롤러에 삽입 한 다음 컨트롤러가 현재 범위에 게시하도록하십시오. 그런 다음 ng 스위치를 $ route.current.name에 바인드 할 수 있습니다.

1

이 문제를 해결할 수있는 좋은 방법은 컨트롤러에 $ route를 삽입 한 다음 현재 경로 이름을 가져 오는 것입니다.

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

것은 그래서, 컨트롤러가 현재 경로 이름을 읽고 페이지 이름 변수에 뷰에 전달됩니다 . 그런 다음 뷰는 뷰를 가져 와서 원하는대로 올바른 뷰를 표시합니다.

희망 하시겠습니까?

관련 문제