0

私はAngularJSに非常に慣れていないので、正しい方向に向ける必要があります。

タスクは、ユーザー アクションから要求されたページのレンダリングが完了するまでにかかる時間を表示する、ある種のウィジェットを作成することです。

プレゼンテーション レイヤーで AngularJS を使用し、バックエンドは Microsoft の Web API になります。

そこで、ブラウザの Navigation Timing API を使用して AngularJS ディレクティブでラップできると考えたので、これを試しました。

angular.module('performanceDirective', [])
   .directive('pagePerformance', function(){
      return {
        restrict: 'AE',
        replace: 'true',
        template: '<div><label id="loadTimeEllapsed">Total Load Time:{{totalLoadTime}}</label></div>',
        scope: {},
        link: function (scope, elem, attrs) {
            scope.$watch('window.performance.timing', function (newValue, oldValue) {
               var timing = window.performance.timing;
               var userTime = timing.loadEventEnd - timing.navigationStart;

               scope.totalLoadTime = userTime;
            });
        }
      };
   });

しかし、バックエンドを呼び出すアクションを実行しているにもかかわらず、ホームページの読み込み後に表示される番号が更新されないため、何かが欠けているようです。

失敗しているものをすべて修正すれば、これは実際に機能するものでしょうか?それとも行き止まりであり、別のオプションを見つける必要があるのでしょうか?

アップデート

ディレクティブの使用には何も関係ありません。基本的には、ページにスローされる要素にすぎません。

<body ng-app="myApp">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li><a href="#/someAction">Some Action</a></li>
                </ul>
            </div>
        </div>

    <div class="row">
        <div class="span4"><data-page-performance /></div> <!-- The Directive -->
        <div class="span10" ng-view></div>
    </div>
</body>

どうやら、このディレクティブは、既にページに移動した後にページを更新した場合にのみ機能しますが、AngularJS コントローラーでアクションをトリガーする要素をクリックしても、パフォーマンスの数値はまったく影響を受けません。

4

0 に答える 0