I'm having a global menu in a AngularJS
app. I don't wan't to show some links on certain paths. I have tried the following. In my controller:
$scope.location = $location;
In my view:
<div ng-if="location.path() != /signup">
[Content]
</div>
But I can't get it to work. Any ideas?
Also, is there a way to print out the current path on the page somehow?
Angular does offer a structural directive that checks the boolean condition and renders the specific element based on that. the shorthand of this directive is *ngIf= “conditions” It can be used with any tags. (Note: don't miss to include a variable in the component) the same way we can write what to do if the condition doesn't match.
The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp). – Saravanan R Sep 25 '15 at 13:25 Add a comment | 0
Angular provides the *ngIf directive which allows you to render elements conditionally in your Angular templates. Let's see this with a simple example. Open the src/app/app.component.ts file in your project define a new class variable called displayElement and gives it an initial value of false:
Let’s discuss what Angular offers. Angular does offer a structural directive that checks the boolean condition and renders the specific element based on that. the shorthand of this directive is *ngIf= “conditions” It can be used with any tags. (Note: don't miss to include a variable in the component)
You should look at "ng-show" and "ng-hide". They can be used to conditionally show and hide content on a page quite easily. An example would be:
<div ng-show="myBoolean">Content will show when myBoolean is true</div>
You can replace "myBoolean" with a call to a function in scope that will check the path or do whatever it is that you need to check. I believe this should do more or less what you are looking for! For more documentation on ng-show see here.
In case the documentation or my example are difficult to read I wrote up a plunkr for you quickly (http://plnkr.co/edit/6fUZDzzGsRjowPOJZ6He?p=preview). Basically this just shows how to use the ng-hide/ng-show directive (they are the same, just opposites of each other). The key routine that I wrote is:
$scope.checkToggle = function(){
// replace "myBoolean" with the logic that checks the path
return $scope.myBoolean;
};
Just replace that logic with what you want to check on the location and it should hide/show correctly. The really nice thing about using this particular directive is you can easily support css animations/transitions which will allow you to nicely fade your element in or out of the page as you hide and show it. Hope this all helps. Best of luck!
Just quote the string you are comparing your variable to :
<div ng-if="location.path() != '/signup'">
[Content]
</div>
As said by drew_w, you should probably try ng-show
, since you are using $location
, you probably are creating a single-page app, where reloading the DOM would be less efficient than just hiding or showing it.
To print it, just put
{{location.path()}}
anywhere the controller with your $scope.location
has effect.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With