Monday, May 11, 2015

AngularJS custom directive with two-way binding using NgModelController


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 gotcha's 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.

1. 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.

2. 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:
https://github.com/gillyb/angularjs-helpers/tree/master/directives/dropdown

9 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Really good once guys, the Example you noted down in the link for two way binding directive using ngModelController makes the subject looks really easy. A good AngularJS Training post to know new stuffs like this. Best AngularJS Training in Chennai

    ReplyDelete
  3. Thanks for sharing this angularjs concept.It is really helpful.Thanks for taking time to share this webpage.
    Regards,
    Angularjs Training | Angularjs Training in Chennai | Angularjs Training Chennai

    ReplyDelete
  4. Really good once guys, the Example you noted down in the link for two.
    บาคาร่า
    gclub จีคลับ
    gclub casino

    ReplyDelete
  5. The information you provide in this blog is very nice. you provide some technical points that help me to learn angularjs.Want to learn Angularjs online Training for free.


    Angularjs Online Training

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. I am technology Enthusiast. Your blog is really awesome, attractive and impressive. I like the way you think. it is very useful for Java SE & Java EE Learners. Your article adds best knowledge to our Java Online Training India. or learn thru Java Online Training India Students. or learn thru JavaScript Online Training India. Appreciating the persistence you put into your blog and detailed information you provide. Kindly keep blogging.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete