使用HTML5历史记录API会导致angularjs中发生未知错误

Question

in my angularjs based application, I am using the HTML5 history API to record the history of links I have clicked.

 history.pushState(null, null, '/meeting/site/');

whenever I put this line of code in the angularjs, the console will emit a error message

Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.7/$rootScope/infdig?p0=10&p1=%5B%5B%22fn%3A…ce%3D!1%3Breturn%20l%7D%3B%20newVal%3A%20210%3B%20oldVal%3A%20209%22%5D%5D
    at Error (<anonymous>)
    at http://localhost/js/vendor/angular.min.js:6:449
    at h.$digest (http://localhost/js/vendor/angular.min.js:101:152)
    at h.$apply (http://localhost/js/vendor/angular.min.js:103:100)
    at http://localhost/js/vendor/angular.min.js:74:474 

I have no idea what causes this error and why ?

Answer 1

The infdig error means "Infinite digest", which means that the digest cycle never stops. To understand what that means, you need to understand how the digest cycle works.

Angular is based on "dirty checking", and a digest cycle is when Angular iterates over all properties on the scope to see which has changed. If any properties has changed, it fires all watches for those properties to let them know that something has happened. And since a watch can change properties on the scope, Angular runs another round of dirty checking after the watches are done. The digest cycle stops when it has iterated over all properties and it sees that none of them has changed. An infinite digest occurs when a watch is always setting a new value to a property. Something like this might explain it better:

$scope.myNumber = Math.random();
$scope.$watch('myNumber', function() {
  $scope.myNumber = Math.random();
});

That is, our watch will never stop being called, since it's always changing the value of myNumber . Another common cause of the error is when you have two properties and two watches, like this:

$scope.prop1 = Math.random();
$scope.prop2 = Math.random();

$scope.$watch('prop1', function() {
  $scope.prop2 = Math.random();
});
$scope.$watch('prop2', function() {
  $scope.prop1 = Math.random();
});

Those watches will trigger each other in an endless loop.

Now, this doesn't explain why you get the error, but I'm guessing you haven't told Angular that you're using the History API and not the default hashbang. You do that by calling $locationProvider.html5Mode(true); . Something like this:

myApp.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
    .when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});

You shouldn't call history.pushState() directly, but use Angulars $location service instead, which will let Angular know when you're modifying the location.