angular.js - angularjs resizable控件

Question

这种控件是怎样实现的，自己写似乎很复杂，在网上找到的资料又很少。
要求，p改变大小的时候可以绑定到angularjs一个控制器的$scope.styles对象里，styles对象有width,height,left,top,rotate五个属性。

Answer 1

Passed

var p = angular.element(document.querySelector('#p'))
console.debug(p[0].offsetHeight）

You can get the complete data of the element, for example
offsetHeight: 74
offsetLeft: 281
offsetParent: body
offsetTop: 698
offsetWidth: 834,
It should be possible to monitor modifications in the directive.

Answer 2

Later I studied the resizable plug-in in jqueryui, which can basically realize this function, but there are flaws. If no control point is selected, the deformation of the entire p frame is based on the upper left corner as the reference point, and the deformation is not very user-friendly.