title: angular routes: testing if a route exists
body: <p>I'm defining some navigation and I want a button to be present if a route is acessible or a permission exists. I have done the permissions bit and that works fine but now I am starting to exclude pages depending on configuration. Ideally I want a directive, something like <code>route-depend</code> that takes a path and queries the router to see if it exists, and if it does the permissions. </p>
  
  <p>So I have the following:</p>
  
  <pre><code>app.config([ "$routeProvider", function($routeProvider) {
      $routeProvider
      .when("/404", {
          templateUrl : "/pages/404.php"
      }).when("/noauth", {
          templateUrl : "/pages/noauth.php"
      }).when("/home", {
          templateUrl : "/pages/homepage.php"
      }).when("/about", {
          templateUrl : "/pages/about.php",
          permission : "logged-in"
      }).otherwise({
          redirectTo : "/404"
      });
  } ]);
  </code></pre>
  
  <p>I have my navigation link set up (same with buttons)</p>
  
  <pre><code>&lt;li data-has-permission="logged-in" &gt;
      &lt;a href="#" data-ng-click="setActiveTab('about')"&gt;ABOUT&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I want to do something like:</p>
  
  <pre><code>&lt;li data-route-depend="/newpage"&gt;
      &lt;a href="#" data-ng-click="setActiveTab('newpage')"&gt;NEW PAGE&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Which in my example would mean the <code>data-route-depend</code> would fail (and hide the element as my <code>has-permission</code> does) as the route is not defined (other than the otherwise redirect to the 404 page)</p>
  
  <p>I have looked at the documentation for <a href="https://docs.angularjs.org/api/ngRoute/provider/$routeProvider" rel="nofollow"><code>$routeProvider</code></a>, and that doesn't seem to have much. It points to the example for <code>$route</code> and that, again doesn't seem to have anything like what I am after.</p>
  
  <p>I have cobbled together this:</p>
  
  <pre><code>app.directive('routeDepend', [ "$route", function($route) {
      return {
          link : function(scope, element, attrs) {
              if (!(typeof attrs.routeDepend == "string")) {
                  throw 'route-depend value must be a string'
              }
              var value = attrs.routeDepend.trim();
  
              function toggleVisibilityBasedOnRoute() {
                  logger($route.routes); // Shows as object of objects
                  for (var route in $route.routes) {
                      if ($route.routes.hasOwnProperty(route)) {
                          logger(typeof route); // shows as a string??
                          logger(route);
                          logger("Checking '"+attrs.routeDepend+"' against '"+route.originalPath+"'"); // undefined originalPath
                          // check route.permission
                      }
                  }
              }
  
              toggleVisibilityBasedOnRoute();
              scope.$on('permissionsChanged', toggleVisibilityBasedOnRoute);
          }
      };
  } ]);
  </code></pre>
  
  <p>But as you can see from the comments, things are not resolving as I'm expecting.</p>
  
  <p>What am I doing wrong, how can I make it do what I want?</p>