javascript - angularjs 可拖动指令在内部显示值

Question

在指令开发者指南中，我试图扭曲关于可拖动指令的示例之一，并让它也显示它的坐标。

但我的代码更改使指令不可拖动。最重要的变化是我在指令中添加了范围，如下所示。任何人都可以提供帮助吗？完整的源代码可以在下面的链接中找到。谢谢!

https://plnkr.co/edit/muegeHyOWC828IjI84Tt?p=preview

scope:{
    startX: '=', 
    startY: '=', 
    x: '=',
    y: '='
  },

Answer 1

您没有将 Controller 变量传递给指令:

<span my-draggable  
 startX="startX" startY="startY" 
 x="x" y="y" >
    Drag Me({{x}},{{y}})
</span>

Demo Plunker 1

---

但是如果你还想更新计数器，我会改为绑定(bind)方法:

  .directive('myDraggable', ['$document','$timeout', function($document,$timeout) {
    return {
      scope:{
        onChange: '&'
      },

      link: function(scope, element, attr) {

         scope.x=0;
         scope.y=0;
         scope.startX=0;
         scope.startY=0;

        element.css({
         position: 'relative',
         border: '1px solid red',
         backgroundColor: 'lightgrey',
         cursor: 'pointer'
        });

        element.on('mousedown', function(event) {
          console.log('mousedown');
          // Prevent default dragging of selected content
          event.preventDefault();

          $document.on('mousemove', mousemove);
          $document.on('mouseup', mouseup);
        });



        function mousemove(event) {
            scope.y = event.pageY - scope.startY;
            scope.x = event.pageX - scope.startX;

            element.css({
              top: scope.y + 'px',
              left: scope.x + 'px'
            });  

           $timeout(function(){
            scope.onChange({data:{x:scope.x, y:scope.y}});
           });
        }

        function mouseup() {
          console.log('mouseup');
          $document.off('mousemove', mousemove);
          $document.off('mouseup', mouseup);
        }
      }
    };
  }])

Controller

 $scope.onChange = function(data){
   $scope.x=data.x;
   $scope.y=data.y;
 }

HTML

  <span my-draggable  on-change="onChange(data)" >Drag Me({{x}},{{y}})</span>

Demo Plunker 2