Here’s a new batch of AngularJS tips and gotchas; If you didn’t read it yet, you can check the part 1 and feel free to comment below :)
Access an element scope from outside
This is useful for debugging: in your Chrome console, highlight a node in the Elements tab, then, in the console, to check its scope :
or even :
The Batarang Chrome Extension is much powerful and let you inspect any scope, anywhere :)
Unwatch an expression
Sometimes you want to watch an expression only a few times, and then forget it. The
$watch function returns a callback just for that. You just have to execute it back to destruct the watcher.
1 2 3 4 5 6 7
Group elements in a select
For example you can easily group a model by attribute to have a nested select menu :
Of course, just add an
ng-model directive to your select to data-bind it to one of the values.
Filter falsy values
You can’t use the builtin filter for falsy attributes or values :/ I don’t know if this is a bug of feature, but a simple workaround is to use a custom filter function that you can expose on the scope. (you can also define your own filter).
1 2 3 4
1 2 3 4 5
Filter on objects
The builtin filter function is quite powerful and allows you to filter a list of objects on given properties only, or on everything, exactly or not, negated or not, etc…
1 2 3 4 5
ng-repeat with duplicate items
If for some reason you need to have duplicate items in your
ng-repeat you can extend your
ng-repeat expression with
track by $index and it works :)
Directive : parse attribute without watching it
In one of your directive, if you need to have a read-only access to an attribute model, but without the automatic watch/binding, you can simply use
& instead of
= when declaring the binding in the scope. You’ll then be able to access the model value . (this may break in future releases). This is a shortcut for using the
$parse service on the current scope.
1 2 3 4 5 6 7 8 9 10 11 12
Data-binding to a boolean
You can bind to a boolean value, but you can’t update that value from your directive.
This won’t work :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
You need to use a real model, OR, initialise a new one and use it as your model instead :
You can trigger a callback when your
ng-include partial is loaded :
ngView, you need to listen to the
You know you should write serious tests suites ? There’s everything to help you in AngularJS with Karma test runner + Jasmine.
Once you have many tests, they can take some time to execute and there’s a little trick to speed you up : you can limit the test-runner to a given test group by using
ddescribe instead of
describe and to a single test with
iit instead of
That’s awesome to focus on specific tests for a while.
You can easily decorate and modify any existing service or directive. That’s how the
ngMobile overrides the
ngClick directive to handle transparently the FastClick behaviour.
Here’s an exemple that overrides the
$sniffer service and fix the animation detection for older androids devices (landed in ef5bc6c) :
1 2 3 4 5 6 7 8 9
That’s all for today, feel free to ask and comment below :)