Angular one time binding with the least impact on usual Angular as possible.
Each time your doing interpolation ({{foo.bar}}), Angular adds a watcher on this expression in case it will change over time.
For some use cases, watcher is not needed as the value doesn't change.
To avoid watcher on binding, you would have 2 usuals solutions :
- write your own binding without watcher
- use bindonce from https://github.com/Pasvaz/bindonce
None of these solutions are OK for me. I don't want to rewrite for any new project a binding without watcher, I need a module to manage it. Bindonce is also a no go as I don't like the idea of creating new directives, I'd like to stick with usual Angular.
Still, I admit that I have to change the way I work with Angular to get rid of non-wanted watchers.
I like the curly bracket notation ({{foo.bar}}).
It is simple.
It is something Angular developers are used to.
So to make it clear, I want a tweak for the curly bracket notation =)
You'll need to add a module to your application :
angular.module('mySuperApp', ["bindOnceOrStatic"]);
Add this script to your HTML file :
<script src="bower_components/angular-bindOnceOrStatic/dist/angular-bindOnceOrStatic-min.js"></script>
We'll use [[foo.bar]] to do binding without watcher (kind of like bindonce does).
Unlike bindonce, you can mix your interpolated variable within string, the same way the curly bracket notation allow you to do.
The interpolation is done against the scope.
Sometimes, you may want to do interpolation at loading, once and for all.
This project allow the use of a dictionary, defined outside any scope.
We'll use [[[foo.bar]]] to do binding without watcher at compilation time.
The directive will look into the boosDictionary service for a property foo.
If you want to use this feature, you'll need to add information to the dictionary :
angular.module('mySuperApp').config(function (boosDictionaryProvider) {
// localization is a service containing a subdirectory defined for mySuperApp
boosDictionaryProvider.add('localization');
});
It's been a while that I have this project in mind. Here is the Google+ thread that started the initial bootstrap : https://plus.google.com/117415782545013334199/posts/bABiT5aEEq5
- Find a better way to retrieve the initial $interpolateProvider
- Manage the binding outside attributes (in plain HTML content)
- 0.3.0 : initial version