angular.js - angularjs resizable control

Question

How to implement this kind of control? It seems very complicated to write it yourself, and there is very little information found on the Internet.
It is required that when p changes size, it can be bound to the $scope.styles object of a controller in angularjs. The styles object has five properties: width, height, left, top, and 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.