title: AngularJS - Use attribute directive conditionally
body: <p>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.</p>
  
  <pre><code>&lt;!--draggable attribute is used as handle to make it draggable using jquery event--&gt;           
  &lt;li  ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box"&gt;            
  &lt;!-- Images and other fields are child of "li" tag which can be dragged.--&gt;                    
  &lt;/li&gt; 
  </code></pre>
  
  <p>The method <code>dragSupported</code> is in the template scope and returns <code>true</code> or <code>false</code>. I don't want to create two big duplicate <code>&lt;li&gt;</code> elements by using <code>ng-if</code> for each value returned by <code>dragSupported()</code>. In other words, I am not looking for the following approach to solve this. </p>
  
  <pre><code>&lt;!--draggable attribute is used as handle to make it draggable using jquery event--&gt;           
  &lt;li ng-if="dragSupported() ==true"  ng-repeat="template in templates" draggable id="{{template._id}}" type="template" class="template-box"&gt;            
  &lt;!-- Images and other fields are child of "li" tag which can be dragged.--&gt;                    
  &lt;/li&gt;
  &lt;!--remove "draggable" directive as user doesn't have permission to drag file --&gt;
  &lt;li ng-if="dragSupported() !=true"  ng-repeat="template in templates"  id="{{template._id}}" type="template" class="template-box"&gt;            
  &lt;!-- Images and other fields are child of "li" tag which can be dragged.--&gt;                    
  &lt;/li&gt;
  </code></pre>
  
  <p>Is there any other approach to avoid code duplicity? </p>