!geek

Code, learn & share

Debugging angular view bindings

The way to debug problems with {{}} or ng-bind or any other directive is to use angular.element method.

Example: If you want to debug missing data in \Name : {{person.fullName()}}\

  • Right click on the span and click Inspect element. Make sure span is selected in the elements tab
  • Go to console tab and type
1
angular.element($0).scope().pesron.fullName()

Using angular.element($0).scope() you can inspect the data on scope. The angular.element can also get references to controller, injector using which you can inspect other objects.

1
2
3
4
5
6
7
//Get controller
angular.element($0).controller()

//Getting injector and other objects
var injector = angular.element($0).injector()
injector.get('$rootScope')
injector.get('myService')

The other alternative is to use chrome extension AngularJS Batarang. This will add AngularJS tab in developer Tools. It lists all scopes in the current page. But finding the correct scope for a particualr element quite difficult. The “Enable Inspector” button in batarang doesn’t work that well. So far the angular.element is the best way to debug binding issues.

Comments