角 - 使用属性指令有条件 [英] Angular - Use attribute directive conditionally
问题描述
我使用拖动指令,支持图像拖动。然而,根据用户的角色,我需要禁用图像拖动为某些用户组。我用下面的code。
I am using "draggable" directive to support image dragging. However, as per the role of the user, I need to disable image dragging for certain groups of users. I have used following code.
<!--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
是模板范围和回报真正
或假
。我不想创建两大副本&LT;李&GT;
使用元素 NG-如果
为每个值返回通过 dragSupported()
。换句话说,我不找下面的方法来解决这个问题。
The method dragSupported
is in the template scope and returns true
or false
. I don't want to create two big duplicate <li>
elements by using ng-if
for each value returned by dragSupported()
. In other words, I am not looking for the following approach to solve this.
<!--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>
是否有任何其他的方法来避免code口是心非?
Is there any other approach to avoid code duplicity?
推荐答案
此功能来包装的角作为动态题为 NG-attr-&LT; attrName&GT;
指令。在你的情况下,code可能是这样的:
This functionality comes packaged with Angular as the dynamically-titled ng-attr-<attrName>
directive. In your case, the code might look like this:
<li
id="{{template._id}}"
class="template-box"
type="template"
ng-repeat="template in templates"
ng-attr-draggable="dragSupported() === true"
></li>
借助的jsfiddle 包含用法示例以下值:真正
,假
,未定义
,空
, 1
, 0
和,
。请注意,通常falsey值可能产生怎样意想不到的效果。
The JSFiddle contains examples of usage for the following values: true
, false
, undefined
, null
, 1
, 0
, and ""
. Note how typically-falsey values may yield unexpected results.
这篇关于角 - 使用属性指令有条件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!