javascript - AngularJS の $timeout は、値を計算する前に UI-Router がレンダリングを終了するのを待っていません

Question

私はangularJSand requirejsviaangularAMDを使用して、複雑なアプリケーションを結び付けています。

私の状態の 1 つには、次のような 2 つの単純なビューがあります。

  $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、ページにスタイルを適用するスタイルシートがあります。heightwidthview1

のスタイルシートによって DOM が変更された後に、関数linkFunctionAfterDomCompleteで要素heightとwidthプロパティを計算する必要があるため、関数を でラップしました。view2linkFunctionAfterDomComplete$timeout()

console.logfrom here は、スタイルシートからのスタイリングがこの要素のサイズを変更する前に、この要素のcheckViewOneBoxWidthサイズを報告していますが、スタイリングが適用された後に関数がこの要素のサイズを計算することview2が期待されるという事実にもかかわらず、DOM が完成しました。$timeoutlinkFunctionAfterDomCompleteview2

linkFunctionAfterDomComplete要素が完全にレンダリングされ、すべてのスタイリングが適用された後の要素の真の状態を反映するものを反映する要素プロパティを計算するにはどうすればよいですか?

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