如何设置AngularJs属性使用Javascript

我有我的角度指令draggable1如下：如何设置AngularJs属性使用Javascript

angular.module('test', []). 
    directive('draggable1', function($document) { 


     return function(scope, element, attr) { 
      var startX = 0, 
       startY = 0, 
       x = 0, 
       y = 0; 
      element.css({ 
       position: 'relative', 
       cursor: 'pointer' 
      }); 


      element.on('mousedown', function(event) { 
       // Prevent default dragging of selected content 
       event.preventDefault(); 
       //elementDragged = this; 
       startX = event.screenX - x; 
       startY = event.screenY - y; 
       $document.on('mousemove', mousemove); 
       $document.on('mouseup', mouseup); 
      }); 

     /* 
     element[0].addEventListener('dragstart', function(e) { 
     e.dataTransfer.effectAllowed = 'move'; 
     e.dataTransfer.setData('text', this.innerHTML); 
     elementDragged = this; 
      }); 
     */ 

      function mousemove(event) { 
       y = event.screenY - startY; 
       x = event.screenX - startX; 
       element.css({ 
        top: y + 'px', 
        left: x + 'px' 
       }); 
      } 

      function mouseup() { 
       $document.off('mousemove', mousemove); 
       $document.off('mouseup', mouseup); 
       //comparePositions(); 
      } 




     }; 
    });

当我预先定义的：

<li id="something" draggable1>Element One</li> 
it works completely fine, and I am able to drag my component.

但什么时候在代码中类似的事情，这不工作，

<li id="something">Element One</li> 
document.getElementById("something").setAttribute("draggable1",true)

而我的element不动。如何设置这个attribute以适当的方式？

来源

2016-03-17 Umer

这里有什么你的目标是什么？ –

当用户点击某个按钮，这个项目将成为拖动。 – Umer

您的问题更有可能是当您添加脚本已经收集所有可拖动元素的元素时，您需要重新运行该位。 – rlemon

您可以使用AngularJS的内置指令ng-if检查的条件，并有条件地执行它。这样你可以以条件的方式应用你的指令。

例子：

<div ng-if="{some_condition}"> 
    <ul> 
     <li id="something" draggable1></li> 
    </ul> <!--Execute the directive on the basis of outcome of the if condition--> 
</div>

其他例子

您可以将范围变量传递给指令，并检查它是否是真/假或其他情况，然后应用代码。你的目标是在指令里面。希望这会帮助你。

来源

2016-03-17 19:41:06 que1326

如何设置AngularJs属性使用Javascript

回答

相关问题