Fill a DOM element depending on my current route with Angularjs

Question

I'm doing a multipage website and using some features of AngularJS, but I'm pretty new to it so would like some help. It uses ngview to load subpages, depending on the link clicked on my index file. But on this index file I have a header that I would like to change depending on the current view. Sample:

  <h1>
      {{currentheader}}
  </h1>


<ul class="nav navbar-nav">
<li ng-class="{ active: isActive('/')}">
  <a href="#">Home</a>
</li>
<li ng-class="{ active: isActive('/rooms')}">
  <a href="#zimmer">Rooms</a>
</li>
</ul>

<ng-view></ng-view>

I use a 'isActive' class on the navigation to set the active list item depending on my location.path(). Rendering the ngviews is working fine.

But i can't find a way to modify that header based on my active link. I could do that with jquery but I believe Angular has an easier sollution?

Thanks

EDIT:

found a sollution based on this Update parent scope variable

I guess ngswitch could be useful, but I dont find an example with it used in a ul element. — artdias90, Jan 13 '14 at 11:14

score 1 · Accepted Answer · edited Jan 13 '14 at 12:10

An option that lets you put all the logic to update this header in one place, instead of dividing the logic into the controllers of your child views, is to listen for a $locationChangeSuccess within the controller of your parent view.

function updateHeader($scope,val) {
    $scope.currentheader = val; // Obviously you'd make this more intelligent.
}
$scope.currentheader = "Initial Value";
$scope.$on('$locationChangeSuccess', function (event, toUrl, fromUrl) {
    updateHeader($scope,toUrl);
});

Fill a DOM element depending on my current route with Angularjs

1 Answers1