這種控件是怎樣實現(xiàn)的,自己寫似乎很復(fù)雜,在網(wǎng)上找到的資料又很少。
要求,p改變大小的時候可以綁定到angularjs一個控制器的$scope.styles對象里,styles對象有width,height,left,top,rotate五個屬性。
通過
var p = angular.element(document.querySelector('#p'))
console.debug(p[0].offsetHeight)
可以獲得該元素的完整數(shù)據(jù),例如
offsetHeight: 74
offsetLeft: 281
offsetParent: body
offsetTop: 698
offsetWidth: 834,
在directive中監(jiān)聽修改,應(yīng)該是可以的。
后來研究了下jqueryui里resizable插件,基本可以實現(xiàn)這個功能,但存在缺陷,如沒有選擇哪個控點,整個p框的變形是以左上角為基準點的,變形起來不是很人性化。