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

50 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
  9. Nice Post! It is really interesting to read from the beginning & I would like to share your blog to my circles, keep your blog as updated.
    Vacation Classes in Chennai | Best Technical Boot Camp in Chennai

    ReplyDelete
  10. I am reading your post from the beginning, it was so interesting to read & I feel thanks to you for posting such a good blog, keep updates regularly.
    Angularjs course in chennai

    ReplyDelete
  11. Thanks for sharing this information and keep updating us. This information is really useful to me.
    Java Project Center in Chennai | No.1 Java Project Training in Porur

    ReplyDelete
  12. Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip.
    Embedded Project Center Training in Chennai | Best Embedded Project Course in Adambakkam

    ReplyDelete
  13. Thanks for sharing this valuable blog. Very clear step by step representation of the process. Keep updating.
    PHP Project Center Training in Chennai | Best PHP Project Training in Pallavaram

    ReplyDelete
  14. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging…
    BE Final Year Project Center in Chennai | BE Project in Velachery

    ReplyDelete
  15. Good to learn something new from this blog. Thanks for sharing such a worthy article. Keep updating.
    MCA Final Year Project Center in Chennai | MCA Project in Tambaram

    ReplyDelete
  16. Marvelous and fascinating article. Incredible things you've generally imparted to us. Much obliged. Simply keep making this kind out of the post.
    Angular JS Training in Chennai
    React Training
    Node JS Training

    ReplyDelete
  17. Really I enjoy this blog….. Very nice post… Thanks for sharing and keep updating
    BE Final Year Project Center in Chennai | BE Project in Madipakkam

    ReplyDelete
  18. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.Thanks for sharing.
    Java Project Center in Chennai | Java Project in Chromepet

    ReplyDelete
  19. Informative blog and it was up to the point describing the information very effectively. Thanks to informative post...
    MSC Final Year Project Center in Chennai | BSC Training in Guindy

    ReplyDelete
  20. Very interesting blog which helps me to get the in depth knowledge about the technology, Thanks for sharing such a nice blog…
    BE Final Year Project Center in Chennai | BE Training in Guindy

    ReplyDelete
  21. Gathered some useful information from your content. Keep updating more blog.
    VLSI Final Year Project Center in Chennai | VLSI Training in Madipakkam

    ReplyDelete
  22. You are an awesome writer. The way you express things is very interesting. Waiting for your next post.
    Android Final Year Project Center in Chennai | Android Training in Adambakkam

    ReplyDelete
  23. The only website that offers online casino betting services. The most complete device at this time There are many gambling games to choose from, including Baccarat, Roulette, Sic Bo and many more, through live broadcasts directly from abroad. Can play thousands of times, no minimum Open for 24 hours, ready to win promotion at any time, just apply for gclub

    คาสิโน

    ReplyDelete
  24. Great post and informative blog.it was awesome to read, thanks for sharing this great content to my vision.
    MBA Final Year Project Center in Chennai | MBA Projects in Guindy

    ReplyDelete
  25. Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.Thanks for sharing.
    Dot Net Final Year Project Center in Chennai | Dot Net Projects in Meenambakkam

    ReplyDelete
  26. I’d love to be a part of group where I can get advice from other experienced people that share the same interest. If you have any recommendations, please let me know. Thank you.
    Tablet service center in chennai | Mobile phone display replacement | Laptop service center in chennai | Mobile service center in chennai | Dell laptop service center in chennai | Tablet service center in chennai | Mobile phone display replacement

    ReplyDelete
  27. Your Blog is really amazing with useful information you are shared here...Thank you for sharing such an informative and awesome post with us. Keep blogging article like this……..
    Vacation Courses in Chennai | Summer Classes in Pallikaranai

    ReplyDelete
  28. When your website or blog goes live for the first time, it is exciting. That is until you realize no one but you and your. comprar reloj personalizado

    ReplyDelete
  29. Awesome article, it was exceptionally helpful! I simply began in this and I'm becoming more acquainted with it better! Cheers, keep doing awesome! custom writings

    ReplyDelete
  30. Enjoyed every bit of your blog article. Much obliged. customwritingservice

    ReplyDelete
  31. They are useful to people reading greatly. Thank you again!
    fifa55

    ReplyDelete
  32. The group "King Watercolor" is nicknamed the other เว็บแทงบอล ออนไลน์ party from Germany that may give all the means to kick Venus regularly. As long as the money cut through the Mari season, they sent Levent Merchan to the field to meet Amin Hari Read in the game against Borussia. Cheya Chinaina Gladbach The change made Merrill to change, meaning Bashik kicked under the age of 20, the 100th ordinary player of the Schalke resting place, who had agreed to start the field in the Kendesli

    ReplyDelete
  33. Thanks for sharing this information and keep updating us. This information is really useful to me.
    custom home problems

    ReplyDelete
  34. We are also certified in various networking technologies Custom IT Support

    ReplyDelete
  35. Learning to improve your online writing - or any writing - may be just the ticket you need to save money - or make money. These five simple steps will get you started toward more effective and powerful writing. https://neva24.ru/socium/3584-problemy-vybora-pervoy-raboty.html

    ReplyDelete
  36. I really appreciate the effort you made to share the knowledge. The topic here I found was really effective…

    Check this 1. Best Hacking Websites in Hindi

    2. BLINK HTML GOOGLE TRICK


    3. Turbo VPN VIP Apk link Click here to Latest Download

    ReplyDelete
  37. Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. excellentcustomclothing.com

    ReplyDelete
  38. Thank you so much for sharing this information. Do visit pg projects in chennai

    ReplyDelete
  39. Thank you for this insightful and informative blog post! It provided valuable knowledge and a fresh perspective on the topic. Keep up the great work! Are You looking for Gummies we have best Gummsi Gummies Online Store.

    ReplyDelete