未捕获的错误:[$rootScope:infdig] 实现经过时间计算器时 [英] Uncaught Error: [$rootScope:infdig] when implementing an elapsed time calculator

问题描述

我在浏览器控制台的经过时间计算器代码中收到此错误:

未捕获的错误:[$rootScope:infdig]

我从应用程序启动时的当前时间开始计算经过的时间.

这是我的 html:

<div ng-controller="Ctrl2">已用时间:<span my-current-time="[date,format]"></span>

这是 JavaScript 代码:

function Ctrl2($scope) {$scope.date = new Date();$scope.format = 'M/d/yy h:mm:ss a';}angular.module('时间', [])//注册myCurrentTime"指令工厂方法.//我们注入 $timeout 和 dateFilter 服务，因为工厂方法是 DI..directive('myCurrentTime', function($timeout, dateFilter) {//返回指令链接函数.(不需要编译功能)返回函数(范围，元素，属性){var format,//日期格式超时ID；//timeoutId，这样我们就可以取消时间更新自变量；//用于更新 UI函数更新时间(){element.text(dateFilter(since, format));element.text(((((new Date()).getTime() - since.getTime())/(1000*60)%60) + " 分钟，因为 " + dateFilter(since, format));}//观察表达式，并在发生变化时更新 UI.//scope.$watch(attrs.myCurrentTime, function(value) {//格式 = 值；//更新时间();//});scope.$watch(attrs.myCurrentTime, function(value) {因为 = 值 [0];格式=值[1]；更新时间();});//在一秒内安排更新函数更新后(){//保存用于取消的 timeoutIdtimeoutId = $timeout(function() {更新时间();//更新 DOM稍后更新();//安排另一个更新}, 1000);}//监听 DOM 销毁(移除)事件，并取消下一次 UI 更新//防止在删除 DOM 元素后更新时间.element.bind('$destroy', function() {$timeout.cancel(timeoutId);});稍后更新();//启动 UI 更新过程.}});

请帮忙，我也做了小提琴来看看代码

http://jsfiddle.net/sojharo/9FnU2/1/

解决方案

看起来我已经找到了问题所在.我有一个假设 angular 每次评估都会创建新数组，所以它总是会触发观察者

function Ctrl2($scope) {$scope.date = new Date();$scope.format = 'M/d/yy h:mm:ss a';$scope.options = [$scope.date, $scope.format];//<--添加的行}

<div ng-controller="Ctrl2">已用时间:<span my-current-time="options"></span>//<-- 绑定更改.

更新小提琴

添加

也不确定您是否真的需要此手表功能.请记住， watch 在您的情况下适用于整个数组，而不是内部元素.您可以提取此 scope.$eval(attrs.myCurrentTime) 的值.

I am getting this error in the browser console in my code for an elapsed time calculator:

Uncaught Error: [$rootScope:infdig]

I calculate the elapsed time from the current time when the app starts.

Here is my html:

<div ng-app="time">
  <div ng-controller="Ctrl2">
    Elapsed time: <span my-current-time="[date,format]"></span>
  </div>
</div>

Here is the JavaScript code:

function Ctrl2($scope) {
  $scope.date = new Date();
  $scope.format = 'M/d/yy h:mm:ss a';
}

angular.module('time', [])
  // Register the 'myCurrentTime' directive factory method.
  // We inject $timeout and dateFilter service since the factory method is DI.
  .directive('myCurrentTime', function($timeout, dateFilter) {
    // return the directive link function. (compile function not needed)
    return function(scope, element, attrs) {
      var format,  // date format
          timeoutId; // timeoutId, so that we can cancel the time updates
      var since;   

      // used to update the UI
      function updateTime() {
        element.text(dateFilter(since, format));
        element.text( (((new Date()).getTime() - since.getTime())/(1000*60)%60) + " minutes, since " + dateFilter(since, format));  
      }

      // watch the expression, and update the UI on change.
      //scope.$watch(attrs.myCurrentTime, function(value) {
       // format = value;
       // updateTime();
      //});

      scope.$watch(attrs.myCurrentTime, function(value) {
          since = value[0];
          format = value[1];
          updateTime();
      });

      // schedule update in one second
      function updateLater() {
        // save the timeoutId for canceling
        timeoutId = $timeout(function() {
          updateTime(); // update DOM
          updateLater(); // schedule another update
        }, 1000);
      }

      // listen on DOM destroy (removal) event, and cancel the next UI update
      // to prevent updating time ofter the DOM element was removed.
      element.bind('$destroy', function() {
        $timeout.cancel(timeoutId);
      });

      updateLater(); // kick off the UI update process.
    }
  });

Please Help, I have also made the fiddle to have a look at the code

http://jsfiddle.net/sojharo/9FnU2/1/

解决方案

Looks like I've located the issue. I have an assumption that angular creates new arrays each evaluation so it always fires watcher

function Ctrl2($scope) { $scope.date = new Date(); $scope.format = 'M/d/yy h:mm:ss a'; $scope.options = [$scope.date, $scope.format]; //<--line added }

<div ng-app="time"> <div ng-controller="Ctrl2"> Elapsed time: <span my-current-time="options"></span> //<-- binding change. </div> </div>

updated fiddle

ADDED

Also not sure that you really need this watch functionality. Bear in mind that watch works on whole array in your case not inner elements. You can extract value this scope.$eval(attrs.myCurrentTime).

这篇关于未捕获的错误:[$rootScope:infdig] 实现经过时间计算器时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！