大佬教程收集整理的这篇文章主要介绍了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,controller) {
iElement.on('mouseup',function(){
// 判断是否需要更新
// update the size
});
}
}
});
为了让它能自动更新,我使用setTimeout 来循环检测并更新
app.directive('text',controller) {
var timer;
var updateScene = function () {
resizeView();
timer = setTimeout(updateScene,1000);
};
updateScene();
}
}
});
以上是大佬教程为你收集整理的Angular自定义directive 根据父DOM动态修改大小全部内容,希望文章能够帮你解决Angular自定义directive 根据父DOM动态修改大小所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。