Javascript AngularJS$timeout不是'；在计算值之前，不要等待UI路由器完成渲染

我正在通过

angularAMD

使用

angularJS

和

requirejs

来连接一个复杂的应用程序

我的一个州有两种简单的观点：

  $stateProvider
    .state("common", {
      url: "/",
      views: {
        "view1": {
          templateUrl: "view1.tpl.html"
          },
        "view2": {
          templateUrl: "view2.tpl.html"
        }
      }
    });

html

而

view2

有一个样式表，可以对页面应用一些样式，包括更改

view1

容器的

高度和
宽度

我希望函数
linkfunctionafterdomplete
在
view2
中的样式表修改DOM之后，计算元素的
高度
和
宽度
属性，因此我将
linkfunctionafterdomplete
函数包装在
$timeout（）
中

checkViewOneBoxWidth
中的
console.log
在此报告此元素的大小，然后在
view2
中的样式表中修改此元素的大小，尽管我们希望
$timeout
会导致
linkfunctionafterdomplete
函数在应用了
view2
的样式并且DOM完成后计算此元素的大小

如何获得
linkfunctionafterdomplete
来计算元素属性，这些属性反映了元素在完全渲染和应用所有样式后的真实状态

您需要将函数传递给
$timeout
：

$timeout(function() {
  console.log('timeout: view 1 linked')
}, 0);

或：

以下是：

$timeout(console.log('timeout: view 1 linked'), 0);

将立即执行
控制台.log
，然后将返回值（
未定义
）作为第一个参数传递给
$timeout

演示：

不确定你在实际应用中是否有同样的问题，但我想我还是应该发布这个


基于编辑的新答案
问题是链接元素位于视图模板中，而不是index.html中

如果将其移动到index.html，它将按预期工作（在这种情况下，您不需要
$timeout
，除非您的实际应用程序从指令中添加自定义html）：

演示：

如果将链接保留在视图模板中并保留超时，则基本上会发生以下情况：

Angular将运行其编译函数来准备所有绑定和视图
视图中的HTML将被插入到DOM中，指令将被执行，
console.log
将被添加到超时队列中
link元素现在已经插入到DOM中，浏览器将开始检索CSS。将执行超时队列中的
console.log
请注意，CSS的获取是异步的，在CSS的获取和解析完成之前，将执行超时队列中的
console.log

还请注意，您可能会在不同的浏览器中看到不同的行为

有解决办法，但可能会变得非常混乱

要了解更多信息，请执行以下操作：


我建议将链接移到index.html。
谢谢您的帮助！我真傻，竟然忽略了
console.log
将立即执行。不幸的是，正如您所怀疑的，在我的实际应用程序中，我正在向
$timeout
传递一个函数。现在，我必须用这种洞察力再次检查我的plnkr，看看当我将一个函数传递给
$timeout
时，是否可以在本地重现我遇到的问题。非常感谢。如果你更新了，请告诉我，我会再看一次。修改了问题，看一看——非常感谢：-）是的，在这里更新了最初链接的PLNKR：非常感谢。如果不知道真实情况，很难给出好的解决方案。这里有一个解决方案：。“notify”指令放在样式表链接上，加载时将发出一个事件。这将在Chrome中起作用，对于跨浏览器解决方案，您可能需要添加更多代码，正如我之前发布的链接所述。
$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);