AngularJS-有条件地使用属性指令

Question

我正在使用“可拖动”指令来支持图像拖动。但是，根据用户的角色，我需要为某些用户组禁用图像拖动。我使用了以下代码。

<!--draggable attribute is used as handle to make it draggable using jquery event-->           
<li  ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">            
<!-- Images and other fields are child of "li" tag which can be dragged.-->                    
</li>

该方法dragSupported在模板范围内，并返回true或false。我不想为所返回的每个值创建两个大的重复<li>元素。换句话说，我不是在寻找以下方法来解决此问题。ng- if``dragSupported()

<!--draggable attribute is used as handle to make it draggable using jquery event-->           
<li ng-if="dragSupported() ==true"  ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box">            
<!-- Images and other fields are child of "li" tag which can be dragged.-->                    
</li>
<!--remove "draggable" directive as user doesn't have permission to drag file -->
<li ng-if="dragSupported() !=true"  ng-repeat="template in templates"  id="{{template._id}}" type="template" class="template-box">            
<!-- Images and other fields are child of "li" tag which can be dragged.-->                    
</li>

还有其他方法可以避免代码重复吗？

Answer 1

Angular包含对有条件声明HTML属性的支持，作为动态标题ng-attr-<attrName>指令。

的官方文件 ng-attr

例

在您的情况下，代码可能如下所示：

<li
    id="{{template._id}}"
    class="template-box"
    type="template"
    ng-repeat="template in templates"
    ng-attr-draggable="dragSupported() === true"
></li>

演示版

JSFiddle

这包含以下值用法的示例：true，false，undefined，null，1，0，和""。请注意，通常为假的值可能如何产生意外结果。