Angular 1中如何依据Scope动态添加e-required属性（不使用ng-show）

要实现根据Scope值动态控制e-required属性的存在，不用ng-show的话，直接用AngularJS内置的ng-attr指令就可以搞定，这是专门用来动态控制DOM属性的方案。

具体实现 #

HTML代码 #

<strong class="test" ng-attr-e-required="!disableStreetValidation"></strong>

工作原理 #

• 当$scope.disableStreetValidation = false时，!disableStreetValidation的结果是true，Angular会自动为元素添加e-required属性，最终DOM结构就是<strong class="test" e-required>；
• 当$scope.disableStreetValidation = true时，表达式结果为false，Angular会移除这个属性，最终DOM结构为<strong class="test">。

补充细节 #

如果遇到某些场景下直接绑定布尔值不生效的情况，可以改用下面的写法，确保属性在表达式为假时完全被移除：

<strong class="test" ng-attr-e-required="{{!disableStreetValidation || undefined}}"></strong>

这里利用了Angular的规则：当ng-attr绑定的表达式结果为null、undefined或false时，对应的属性会被从DOM中移除。

内容的提问来源于stack exchange，提问作者Dariusz Rup