Question

我最近开始探索AngularJS，当然，我知道它是在客户端运行的，而且由于SPA（单页应用程序）变得越来越普遍，我有一个关于如何安全隐藏的问题HTML元素。

让我举一个简单的例子：

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

现在，当然，在运行时，不会显示与薪水相关的div标签，但是通过查看HTML源代码或使用我们在Chrome中使用的开发人员工具，可以看到标签，可能是它的价值。

我知道这些标签应该在服务器端进行过滤，当然，但是因为它已经到了客户端，所以div就在那里。

我的问题是，如果有任何方法可以隐藏HTML源代码中的这些div，而不需要将AngularJS与JSTL混合使用。

提前致谢。

Answer 1

尝试ng-if指令：

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

将从DOM中删除相应的div元素。从官方文档：

ngIf指令删除或重新创建DOM树的一部分基于{表达式}。如果分配给ngIf的表达式求值如果为false，则从DOM中删除该元素，否则为a 将元素的克隆重新插入DOM。

Answer 2

使用

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

ng-if 完全删除并重新创建DOM中的元素，而不是通过display css属性更改其可见性

Answer 3

我建议使用ngCloak而不是ngIf。

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

示例：

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