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