It took me a while, but I finally got it right!
I recently tried to create a custom directive with 2 way binding, using the 'ng-model' attribute. This was a little tricky at first - I ran into some articles, but they didn't seem to work for me, and I needed to make some tweaks to get it right.
I don't want to go over everything I read, but just want to publish the changes or gotchas you should know about.
The best article I read on the subject is this one: http://www.chroder.com/2014/02/01/using-ngmodelcontroller-with-custom-directives/.
I recommend reading it. It has the best explanation about how '$formatters' and '$parsers' work, and what's their relation to the ngModelController.
After reading that article, there are 2 problems I ran into:
ngModelController.$parsers and ngModelController.$formatters are arrays, but 'pushing' my custom function to the end of the array didn't work for me. When changing the model, it never got invoked. To make this work, I needed to push it in the beginning of the array, using the Array.prototype.unshift method.- The second problem I had was that I needed to pass
ng-model an object. Passing it a value won't work. You might be thinking that it's obvious since passing a value won't suffice as a reference to it, but this wasn't obvious to me, since passing ng-model a value when using an 'input' element for example works and still updates it both ways.
For a full working example of a two-way binding directive using ngModelController (the ng-model attribute), you can take a look at this:
