Question

从指令开发人员指南中，我试图扭曲一个关于draggable指令的示例，并使其显示它的坐标。

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

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

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

Answer 1

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

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

Demo Plunker 1

但是如果你想更新计数器我会改为绑定方法：

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

HTML 的

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

Demo Plunker 2

Answer 2

以下是您工作的更新代码

＆＃13;

$('.alert').remove();    //selects all elements with the "alert" class, then removes them from the page

＆＃13;

angular.module('dragModule', [])
  .controller('myController', ['$scope', function($scope){
    $scope.startX=0;
    $scope.startY=0;
    $scope.x=0;
    $scope.y=0;
  }])
  .directive('myDraggable', ['$document', function($document) {
    return {
      scope:{
        startX: '=', 
        startY: '=', 
        x: '=',
        y: '='
      },
      link: function(scope, element, attr) {  
        element.css({
         position: 'relative',
         border: '1px solid red',
         backgroundColor: 'lightgrey',
         cursor: 'pointer'
        });

        element.on('mousedown', function(event) {
          // Prevent default dragging of selected content
          event.preventDefault();
          scope.startX = event.pageX - scope.x;
          scope.startY = event.pageY - scope.y;
          $document.on('mousemove', mousemove);
          $document.on('mouseup', mouseup);
          scope.$apply();
        });
 
        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'
          });
          scope.$apply();
        }

        function mouseup() {
          $document.off('mousemove', mousemove);
          $document.off('mouseup', mouseup);
        }
      }
    };
  }]);

＆＃13;

https://jsfiddle.net/Shubhamtri/w13sfaun/2/

angularjs draggable指令在里面显示值

2 个答案: