我正在使用angularJSand requirejsviaangularAMD将一个复杂的应用程序连接在一起。
我的一个州有两个简单的视图，如下所示：
$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属性，因此我将函数包装在中。view2linkFunctionAfterDomComplete$timeout()
尽管我们希望会在应用样式样式为from的情况下导致样式函数计算此元素的大小，并且从样式表样式修改元素的大小之前console.log，checkViewOneBoxWidth这里的from会报告该元素的大小。DOM已完成。view2$timeoutlinkFunctionAfterDomCompleteview2
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] 删除。
我来说两句