An AngularJS directive that acts like ngIf but shows/removes the element based in the current route path.
<div drpx-if-route="/?">
This is present only when route is the root.
</div>
<div drpx-if-route="/products">
This is present only when route is /products.
</div>
<div drpx-if-route="/products/[^/]+">
This is present only when route is pointing to a product, /products/:id.
</div>
Add the bower component drpx-components
:
$ bower install --save drpx-components
Add the dependency to your index.html
:
<script src="bower_components/drpx-components/drpxIfRouteDirective.js"></script>
Make sure that you have included the dependency with DrpxIfDirectiveSupport
:
<script src="bower_components/drpx-components/DrpxIfDirectiveSupport.js"></script>
Add the dependency to you YourApp.js
:
angular.module('YourApp', [
// ...your other dependencies...
'drpx.ifroute',
]);
Invoke it in your html templates using the directive as attribute and as value a string with a regular expression that should satisfy the current url:
<ANY drpx-if-route="yourStringRegex"> content present when the route matches</ANY>