CODEWITHSUNDEEP
htmlangularjs
Bruno Brs
Bruno Brs

Reputation: 693

Is there a way to safely hide HTML tags in AngularJS?

I'm recently starting to explore AngularJS, and of course, i know it is ran at the client side, and since SPA (Single Page Applications) are becoming more and more common, i have a question regarding how to safely hide HTML elements.

Let me give a simple example:

Employee
<div ng-show="canSeeSalary">
    {{salary}}
</div>

Now, of course, at runtime the div tag related to the salary won't be displayed, however by seeing the HTML source code, or using a developer tool like the one we have in Chrome, it would be possible to see the tag and probably its value.

I know tags like these should be filtered at the the server-side, of course, but since it has come to the client side, the div will be there.

My question is exactly, if there is any way i could hide these divs from the HTML source code, without needing to mix AngularJS with JSTL, for example.

Thanks in advance.

Upvotes: 0

Views: 1739

Answers (3)

rmuller
rmuller

Reputation: 1837

I would recommend using ngCloak rather than ngIf.

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

example:

<div ng-cloak> {{::test}} </div>

ngCloak @ Official Angular Docs

Upvotes: 1

Maksym Demidas
Maksym Demidas

Reputation: 7817

Try ng-if directive:

<div ng-if="canSeeSalary">
    {{salary}}
</div>

Corresponding div element will be removed from the DOM. From the official documentation:

The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.

Upvotes: 4

Debasish Mohapatra
Debasish Mohapatra

Reputation: 856

Use 

Employee
<div ng-if="canSeeSalary">
    {{salary}}
</div>

ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property

Upvotes: 2

Related Questions