Реализация директивы производительности загрузки страницы в AngularJS

Я очень новичок в AngularJS, поэтому мне нужно немного указывать в правильном направлении.

Задача состоит в том, чтобы создать какой-то виджет, который отображает, сколько времени требуется от любого действия пользователя, пока запрошенная страница не закончит рендеринг.

Мы будем использовать AngularJS на уровне представления, а бэк-энд будет веб-API Microsoft.

Поэтому я подумал, что мог бы использовать 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, на число производительности это никак не повлияет.

Источник

0 ответов

Другие вопросы по тегам