Fantaisies programatico-ludiques

AngularJS console debugging tips + pre-commit hooks

Just some handy accessors for the brower console :

var myScope = $('#directive > select.or').scope()
var $rootScope = $('body').scope() // if <body> has the 'ng-app' attribute
var myController = $('#directive > select.or').controller()

var injector = $(document.body).injector()
var myService = injector.get('myServiceName')

And there are 3 handy pre-commit hooks :

- repo: local
  - id: angular-forbid-apply
    name: In AngularJS, use $digest over $apply
    language: pcre
    entry: $apply
    files: \.js$
  - id: angular-forbid-ngrepeat-without-trackby
    name: In AngularJS, ALWAYS use 'track by' with ng-repeat
    language: pcre
    entry: ng-repeat(?!.*track by)
    files: \.html$
  - id: angular-forbid-ngmodel-with-no-dot
    name: In AngularJS, "Whenever you have ng-model there’s gotta be a dot in there somewhere"
    language: pcre
    entry: ng-model="?[^.]+[" ]
    files: \.html$

You can find the justification for the two first hooks in those great slides by Nir Kaufman.

The second will help you to detect a nested scope gotcha in AngularJS identified by Miško Hevery:

"Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong"