Javascript angularjs draggable指令，用于在内部显示值

在《指令开发人员指南》中，我尝试扭曲一个关于draggable指令的示例，并使其显示坐标

但我的代码更改使指令无法拖动。最重要的变化是我在指令中添加了作用域，如下所示。有人能在这方面提供帮助吗？完整的来源可以在下面的链接中找到。谢谢

---

您没有将控制器变量传递给指令：

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

控制器

HTML

拖动我（{x}，{{y}）

---

以下是您的工作更新代码

angular.module（'dragModule'，[]）
.controller（'myController'，['$scope'，函数（$scope）{
$scope.startX=0；
$scope.startY=0；
$scope.x=0；
$scope.y=0；
}])
.directive（'myDraggable'，['$document'，function（$document）{
返回{
范围：{
startX:“=”，
startY:“=”，
x:“=”，
y:“=”
},
链接：函数（作用域、元素、属性）{
element.css({
位置：'相对'，
边框：“1px纯红”，
背景颜色：“浅灰色”，
光标：“指针”
});
on（'mousedown'，函数（事件）{
//防止默认拖动选定内容
event.preventDefault（）；
scope.startX=event.pageX-scope.x；
scope.startY=event.pageY-scope.y；
$document.on（'mousemove'，mousemove）；
$document.on（'mouseup'，mouseup）；
作用域：$apply（）；
});
函数mousemove（事件）{
scope.y=event.pageY-scope.startY；
scope.x=event.pageX-scope.startX；
element.css({
顶部：scope.y+‘px’，
左：scope.x+‘px’
});
作用域：$apply（）；
}
函数mouseup（）{
$document.off（'mousemove'，mousemove）；
$document.off（'mouseup'，mouseup）；
}
}
};
}]);

拖动我（{x}，{{y}）
Demo Plunker 1遗漏了范围。$apply（）与Shubham Tripathi答案相比。Plunker 2非常好用，谢谢。但我不明白为什么我需要将变量传递给指令，而绑定不能做同样的工作。有什么想法吗？非常感谢。@CodeforFun描述是：它使代码简单易读。通过一个回调，我们完成了所有的工作，不需要绑定4个会影响性能的项。使用demo 2，您可以轻松控制更新频率，例如：我们可以每100毫秒更新x和y，而不是每1毫秒更新一次。@CodeforFun$timeout与$apply-triggers摘要周期相同。然而，如果摘要循环已经触发了hanks，scope.$apply（）可以引发异常。我可以知道为什么需要start-x=“startX”等吗？作用域：{startX:=“}的用法是什么？它不是用于绑定变量吗？要通过控制器和指令之间的双向绑定访问任何父作用域数据，我们需要显式地将其传递给我们的指令。您可以参考以下内容-
<span my-draggable  
 startX="startX" startY="startY" 
 x="x" y="y" >
    Drag Me({{x}},{{y}})
</span>

  .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);
        }
      }
    };
  }])

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

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