Javascript 角度指令:有没有比“$timeout”更好的方法来获取有关在“compile”函数中创建的DOM元素的信息?
我使用一个指令创建了一个自定义下拉元素,其行为的一个方面是自动调整大小,根据其最宽选项的宽度,该元素适合三种大小之一 但是,由于选项是基于来自控制器的数据在编译函数中填充的,因此我无法确定选项列表的宽度,直到稍后在pre-link或post-link函数中,但是我能够检查宽度的唯一方法是通过将我的post-link函数嵌套在一个0-ms计时器中来等待填充列表 这是我通过各种资源找到的解决方案,但我觉得可能有更优雅的方法 以下是我的指令代码:Javascript 角度指令:有没有比“$timeout”更好的方法来获取有关在“compile”函数中创建的DOM元素的信息?,javascript,angularjs,angularjs-directive,compilation,timeout,Javascript,Angularjs,Angularjs Directive,Compilation,Timeout,我使用一个指令创建了一个自定义下拉元素,其行为的一个方面是自动调整大小,根据其最宽选项的宽度,该元素适合三种大小之一 但是,由于选项是基于来自控制器的数据在编译函数中填充的,因此我无法确定选项列表的宽度,直到稍后在pre-link或post-link函数中,但是我能够检查宽度的唯一方法是通过将我的post-link函数嵌套在一个0-ms计时器中来等待填充列表 这是我通过各种资源找到的解决方案,但我觉得可能有更优雅的方法 以下是我的指令代码: .directive('slidingSele
.directive('slidingSelect', function($timeout) {
return {
restrict: 'E',
compile: function(element, attrs) {
var selecting = attrs.selecting;
// ng-repeated options come from selecting attr
var dropDownList = $('<div class="sliding-select-list"></div>');
dropDownList.append('<div class="sliding-select-option" ng-repeat="item'+
' in home.'+selecting+'.options">{{item.name}}</div>');
element.append(dropDownList);
element.click(
// Function to slide up/down the list as necessary
function() {
/* omitted */
});
// With compile defined, can return post-link functions
return function(scope, element, attrs) {
$timeout(function() {
var list = element.find('.sliding-select-list');
var options = list.children();
// Find natural width of list, set data-width, then list to match
var listWidth = list.width();
element.attr('data-width', (listWidth>180?'large':(listWidth>100?'medium':'small')));
// Hide list
element.addClass('closed');
}, 0);
};
}
};
当javascript运行时,浏览器暂停DOM的呈现,直到javascript执行完成。因此,当您将元素添加到DOM中时,浏览器知道它有新的项目要绘制,并且它必须重新绘制屏幕,但在javascript完成执行之前,它无法这样做 设置超时的作用是让浏览器在调用为超时注册的任何函数之前重新获得控制权,从而允许它在运行超时代码之前重新绘制屏幕并计算选项列表的宽度 我确信这比我所描述的要复杂得多,但这样思考有助于我更好地理解javascript和DOM是如何协同工作的
我想不出更好的办法来做你想做的事。我一直都是这样做的。为什么要使用compile?为什么不链接?在任何情况下,看看compile bc,它允许我使用ng repeat指令添加选项,并让它编译这些选项以显示在呈现的页面上