How to understand the console error messages in Angular JS? Any tools?
Question
I am new to Angular JS.My first question how to understand the error messages from console in Angular JS. I have written this snippet of code for matching passwords. It throws error on console, But it works fine.Its wired. I am not able to understand anything from those console messages. Could anyone please point me out why I am getting error message on console.
var sampleApp = angular.module("sampleApp",[]); sampleApp.controller('sampleCtrl', ['$scope', function($scope){ }]); sampleApp.directive('pwCheck', [function(){ // Runs during compile return { require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements link: function($scope, iElm, iAttrs, controller) { var password1 = iAttrs.ngModel; var password2 = iAttrs.pwCheck; $scope.$watch('[password1, password2]', function(newValue, oldValue){ controller.$setValidity('pwmatch', $scope[password1] === $scope[password2] ); }); } }; }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <html ng-app="sampleApp"> <head> </head> <body ng-controller="sampleCtrl"> <form name="myForm"> <label for="pw1">Set a password:</label><br /> <input type="password" id="pw1" name="pw1" ng-model="pw1" /><br /> <label for="pw2">Confirm the password:</label><br /> <input type="password" id="pw2" name="pw2" ng-model="pw2" pw-check="pw1" /> <div class="msg-block" ng-show="myForm.$error"> <span class="msg-error" ng-show="myForm.pw2.$error.pwmatch">Passwords don't match.</span> </div> </form> </body> </html>
Is there any easy way/tool to debug Angular JS code , As I am facing a lot of difficulty in understanding the console error messages. Screenshot of console:
2 answers
solution1
0 2014-10-01 06:24:36
I find that the chrome extension Angular Batarang is awesome for debugging Angular JS:
https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en
It adds another tab in the developer tools that allows you to check apps etc.
Hope it helps.
solution2
0 2014-10-01 06:35:51
If it was an error in your file than angular will give you the position of the problem code in the 1st line of error (last 2 digits). The following lines are call stack. If it was an error you caused in angular code than the first line is a link to angular site that describes the error.
https://docs.angularjs.org/error/$rootScope/infdig - this is your error. You somehow causing an infinite loop in the digest cycle.
EDIT: and as JanR suggested use Chrome with Batarang it is much more suited for angular
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.