CODEWITHSUNDEEP
angularjs
cheers_to_you
cheers_to_you

Reputation: 53

AngularJS > Logo links to /about when URL /home and then /home when URL /about

I'm sure the answer is somewhere, but how do i link the same component (Navbar logo) to different pages depending on the URL. I would like to link /about when Url= /home and then /home when Url= /about.

app.js:

angular.module('myApp', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router'])
  .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainCtrl'
      })      
      .state('about', {
        url: '/about',
        templateUrl: 'app/about/about.html',
        controller: 'AboutCtrl'
      })
      .state('work', {
        url: '/work',
        templateUrl: 'app/work/work.html',
        controller: 'WorkCtrl'
      });

    $urlRouterProvider.otherwise('/');
  });

home.html

<div class="page">
  <div ng-include="'components/navbar/navbar.html'"></div>
</div>

navbar.html

<nav class="navbar" ng-controller="NavbarCtrl">
    <a href="#/about"><h1>title</h1></a>

</nav>

about.html

<div class="page">
   <div ng-include="'components/navbar/navbar.html'"></div>
</div>

NavbarCtrl * not sure what to do here, add a directive use ui.router use $location ??*

Hope someone can help, I've been thinking about it all week.

Upvotes: 0

Views: 1240

Answers (2)

luser
luser

Reputation: 11

Not sure if I understood you correctly, but wouldn't ng-show fit your needs? ng-show

You could check in it what is the location at the moment and show proper url depending on it.

Upvotes: 1

risto
risto

Reputation: 1304

You answered your own question I think. I would use ngRoute and $location and I would probably create a directive for it.

Upvotes: 0

Related Questions