如何設置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

回答

相關問題