Skip to content Skip to sidebar Skip to footer

Why Would A Hash Computation Using Cryptojs Cause A $rootscope:infdig Error In Angular?

I have a simple page that shows the hash of a string as someone types it into the page. I found that the page had a JavaScript error Error: [$rootScope:infdig] http://errors.angula

Solution 1:

Providing ng-bind="sha1('bar')" makes the digest cycle unstable, everytime sha1 function returns a different object (reference is different) and your digest cycle has to run again to stabilize it and every digest cycle again evaluates the ng-bind function expression and it goes on till it reaches the max limit set (10). You can also easily replicate this issue by just doing return [] in your scope method. This is just a side effect of not so good practice of binding a function expression to ng-bind as it runs every digest cycle, if at all used it should be carefully evaluated.

One simple solution is to bind ng-change/ng-blur event on your password or any other trigger and just bind ng-bind to a property instead of a function expression.

angular.module('app',[])
.constant('Crypto', window.CryptoJS);
functionMyCtrl($scope, Crypto) {
   $scope.encrypt = function() {
     $scope.encrypted = Crypto.SHA1($scope.password);
   };
 }
<htmllang="en"ng-app="app"><head><scriptsrc="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script></head><body><divclass="app"ng-appng-controller="MyCtrl"><inputid="password"ng-model="password"type="password"placeholder="Password"ng-change="encrypt()"><spanng-bind="encrypted"></span></div></body></html>

For better usage of DI i have placed crpto in a constant and inject it where needed.

Post a Comment for "Why Would A Hash Computation Using Cryptojs Cause A $rootscope:infdig Error In Angular?"