AngularJS $ timeout不等待UI-Router在计算值之前完成渲染

Question

我正在使用angularJS和requirejs通过angularAMD将复杂的应用程序连接在一起.

我的一个州有两个简单的观点,如下:

  $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()

这里的console.logfrom checkViewOneBoxWidth报告了这个元素的大小,在样式表的样式之前view2修改了这个元素的大小,尽管事实上我们希望在应用样式后$timeout使linkFunctionAfterDomComplete函数计算这个元素的大小,view2DOM已完成.

如何linkFunctionAfterDomComplete计算元素属性,这些元素属性反映了在完全呈现元素并应用了所有样式后反映元素真实状态的元素属性？

http://plnkr.co/edit/WjGogh?p=preview

Answer 1

您需要将一个函数传递给$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

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

1. Angular 将运行其编译函数来准备所有绑定和视图。
2. 视图中的 HTML 将被插入到 DOM 中，指令将被执行，并将console.log被添加到超时队列中。
3. link 元素现在已插入到 DOM 中，浏览器将开始检索 CSS。超时队列console.log中的就会执行。

请注意，CSS 的获取是异步的，并且console.log来自超时队列的操作将在 CSS 的获取和解析完成之前执行。

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

有解决方案，但可能会变得非常混乱。

要了解更多相关信息：

样式表什么时候真正加载？

我建议将链接移至index.html。