我正在使用angularJS
and requirejs
viaangularAMD
将一个复杂的应用程序连接在一起。
我的一个州有两个简单的视图,如下所示:
$stateProvider
.state("common", {
url: "/",
views: {
"view1": {
templateUrl: "view1.tpl.html"
},
"view2": {
templateUrl: "view2.tpl.html"
}
}
});
html
<div ui-view="view1"></div>
<div ui-view="view2"></div>
View1
有一个指令:
.directive('checkViewOneBoxWidth', function ($timeout) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var linkFunctionAfterDomComplete = function () {
console.log(elem[0].scrollWidth);
}
$timeout(linkFunctionAfterDomComplete, 0);
}
}
})
而view2
有一些适用于造型的页面,包括更改样式表height
和width
该的view1
容器。
在样式表修改DOM后,我希望函数linkFunctionAfterDomComplete
计算元素的height
和width
属性,因此我将函数包装在中。view2
linkFunctionAfterDomComplete
$timeout()
该console.log
从checkViewOneBoxWidth
这里报告这种元素的大小,从样式表的样式之前view2
,此元素的修改尺寸尽管我们预期$timeout
造成linkFunctionAfterDomComplete
功能从造型后,计算出该元素的大小view2
应用和DOM已完成。
linkFunctionAfterDomComplete
在元素完全渲染并应用了所有样式之后,如何计算出反映元素真实状态的元素属性?
您需要将一个函数传递给$timeout
:
$timeout(function() {
console.log('timeout: view 1 linked')
}, 0);
要么:
var fn = function () {
console.log('timeout: view 1 linked');
};
$timeout(fn, 0);
以下:
$timeout(console.log('timeout: view 1 linked'), 0);
将console.log
立即执行,然后将返回值(undefined
)作为第一个参数传递给$timeout
。
演示: http ://plnkr.co/edit/zWgoJihcMH693fWfUp09?p = preview
不知道您的实际应用程序中是否存在相同的问题,但是我认为无论如何我都应该发布此问题。
问题是您的链接元素位于视图模板中,而不是位于index.html中。
如果将其移至index.html,它将按预期运行($timeout
在这种情况下,您将不需要它,除非您的实际应用程序从指令中添加了自定义HTML):
演示: http ://plnkr.co/edit/m3sriF2YYH5T8y42R5Lr?p = preview
如果将链接保留在视图模板中并保持超时,则基本上是这样:
console.log
将被添加到超时队列中。console.log
超时队列中的in将执行。请注意,CSS的获取是异步的,并且在CSSconsole.log
的获取和解析完成之前,将执行超时队列中的from。
另请注意,您可能会在不同的浏览器中看到不同的行为。
有解决方案,但可能会变得很混乱。
要了解更多信息:
我建议只将链接移到index.html。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句