AngularJS：如何按需添加ng-show属性以避免代码重复？

嘿，这个场景我太熟悉了，完全可以不用写两段重复的代码！你想要的精简写法是可行的，但不能用ng-attr来动态添加ng-show指令——因为ng-attr的作用是动态设置原生HTML属性（比如title、data-*这类），而ng-show是AngularJS的内置指令，不属于原生属性范畴，所以用ng-attr-ng-show自然不会生效。

那正确的简化方式是什么呢？其实只需要把ng-show的表达式写得更聪明一点，就能同时覆盖两种场景：

<div ng-show="X ? 你的绑定条件 : true">
  <!-- 这里放你原来重复的所有内容 -->
</div>

逻辑解释： #

• 当数据X存在时，表达式会使用你的绑定条件来判断是否显示这个div，和你原来带ng-show的逻辑完全一致；
• 当数据X不存在时，表达式直接返回true，相当于这个div总是显示，和你原来不带ng-show的逻辑完全匹配。

这样就把两段重复的代码合并成了一个块，完美解决了重复问题！

如果你的“X存在”的判断需要更严谨（比如要区分undefined、null或者空值），可以把表达式写成更明确的形式，比如：

<div ng-show="(X !== undefined && X !== null) ? 你的绑定条件 : true">
</div>

内容的提问来源于stack exchange，提问作者dev'd