Angular自定义directive 根据父DOM动态修改大小

在进行Angular编程时，往往会自己定义directive命令。

情景： 我们在利用jQuery-ui的sortable 方法移动组件时，需要动态调整被移动组件的大小，即标签的width 和 height。

方法： 我试过了很多种方法,

向元素中添加监听resize事件，然而，resize事件是在当浏览器窗口变化时才会被激发，单纯移动一个元素并不会激发此事件。sortable 是通过css()来改变父元素的大小的，所以没办法监听css的改变。

另外一种方法，在需要调整的元素中绑定鼠标事件，比如“mouseup”。因为，我们用鼠标拖动这个元素，把它放到另外一个大小与这个元素不一样的容器，释放后，希望它能动态适应改容器的大小。

虽然 mouseup 在 鼠标抬起后 被激发，但是，我们不移动这个元素，在元素上面点击时，也会激发，这样就造成没有必要的频繁调用。并且，很多时候在拖动后抬起鼠标时，并没有激发改事件。

app.directive('text',function(){
 return {
        restrict : 'A',
        transclude: true,
        controller: function ($scope,$element,$transclude) {


        },
        link:{
            pre: function (scope,iElement,iAttrs,controller) {

            },
            post:function (scope,iElement,iAttrs,controller) {
               iElement.on('mouseup',function(){

                     // 判断是否需要更新            
                     // update the size   
               });
           }
        }
});

为了让它能自动更新，我使用setTimeout 来循环检测并更新

app.directive('text',function(){
 return {
        restrict : 'A',
        transclude: true,
        controller: function ($scope,$element,$transclude) {


        },
        link:{
            pre: function (scope,iElement,iAttrs,controller) {

            },
            post:function (scope,iElement,iAttrs,controller) {
                var timer;
                var updateScene = function () {
                        resizeView();
                        timer = setTimeout(updateScene, 1000);
                    };
                updateScene();
           }
        }
});