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

Question

根据指令开发人员指南，我尝试扭曲关于可拖动指令的示例之一，并使其也显示其坐标。

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

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

这是您的

的有效更新代码

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="dragModule"> 
  <div ng-controller="myController"> 
    <span my-draggable start-x="startX" start-y="startY" x="x" y="y" id="drag">Drag Me({{x}},{{y}})</span>
  </div>
</body>

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

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

angularjs draggable directive to display value inside

javascript

angularjs

angularjs-directive

angularjs-scope