CODEWITHSUNDEEP
javascriptangularjsangular-ui
akonsu
akonsu

Reputation: 29566

cannot figure out how to use ui-route

I cannot figure out how to correctly use ui-route, the samples on the angular-ui web site do not help.

Here is my code. I want to implement a simple navigation menu. When the route matches that of the item then I want to show the <span> otherwise I want to show <a>. I expected $uiRoute to reflect the current route, but apparently it does not because I get <span> elements in the output no matter what the route is.

http://jsbin.com/ugefoq/2/edit

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset=utf-8 />
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      angular.module('app', ['ng', 'ui']);
    </script>
  </head>
  <body>
    <ul>
      <li ui-route="#/link0">
        <a ui-if="$uiRoute" ng-href="#/link0">link0</a>
        <span ui-if="!$uiRoute">link0</span>
      </li>
      <li ui-route="#/link1">
        <a ui-if="$uiRoute" ng-href="#/link1">link1</a>
        <span ui-if="!$uiRoute">link1</span>
      </li>
    </ul>
  </body>
</html>

Upvotes: 0

Views: 906

Answers (1)

Ben Felda
Ben Felda

Reputation: 1484

It looks like you have it right, except that based on your description, you have your ui-if statements reversed. Right now, your saying, show the link if the url matches my href, show the span if they don't.

On another note, if you are doing a single page application here, you may not want to use ui-if as it completely removes the element, meaning you cannot dynamically show it later when your route changes.

Upvotes: 1

Related Questions