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
Subscribe to:
Post Comments (Atom)
This comment has been removed by a blog administrator.
ReplyDeleteGreat Article
DeleteB.Tech Final Year Projects for CSE in Angularjs
Project Centers in Chennai
JavaScript Training in Chennai
JavaScript Training in Chennai
Thanks for your sharing
Deletefifa555
แทงบอล
คาสิโน
fifa55th
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
ReplyDeleteNice post..Android Training in Chennai | Best Android Training in Chennai | Best Android Training in Chennai with Placement
ReplyDeleteThanks for sharing this angularjs concept.It is really helpful.Thanks for taking time to share this webpage.
ReplyDeleteRegards,
Angularjs Training | Angularjs Training in Chennai | Angularjs Training Chennai
Really good once guys, the Example you noted down in the link for two.
ReplyDeleteบาคาร่า
gclub จีคลับ
gclub casino
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.
ReplyDeleteAngularjs Online Training
This comment has been removed by the author.
ReplyDeleteI 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.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks for sharing such a wonderful article.
ReplyDeletePLC Training in Chennai | PLC Training Institute in Chennai | PLC Training Center in Chennai | PLC SCADA Training in Chennai | PLC SCADA DCS Training in Chennai | Best PLC Training in Chennai | Best PLC Training Institute in Chennai | PLC Training Centre in Chennai | PLC SCADA Training in Chennai | Automation Training Institute in Chennai | PLC Training in Kerala
great
ReplyDeleteAngular 5 Resources
| Angular 5 Training in Chennai.
mat-grid-tile is not a known element
mat-form-field must contain a MatFormFieldControl
Can't bind to 'disabled' since it isn't a known property of 'div
Can't bind to 'ngForIn' since it isn't a known property of 'a'.
Can't bind to 'value' since it isn't a known property of 'mat-option'.
@angular/cdk/cdk has no exported member 'DataSource'
Your Blog is big and there is a lot of good information! Thanks
ReplyDeleteKind regards
Best CorelDraw Training Institute in Chennai | No.1 CorelDraw Training Institute in Velachery
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.
ReplyDeleteVacation Classes in Chennai | Best Technical Boot Camp in Chennai
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.
ReplyDeleteAngularjs course in chennai
the owner of the casino does not allow it because employees do not have the right to gamble (excuse).
ReplyDeletegclub
Thanks for sharing this information and keep updating us. This information is really useful to me.
ReplyDeleteJava Project Center in Chennai | No.1 Java Project Training in Porur
Thank you for sharing this valuable information. But get out this busy life and find some peace with a beautiful trip.
ReplyDeleteEmbedded Project Center Training in Chennai | Best Embedded Project Course in Adambakkam
Thanks for sharing this valuable blog. Very clear step by step representation of the process. Keep updating.
ReplyDeletePHP Project Center Training in Chennai | Best PHP Project Training in Pallavaram
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…
ReplyDeleteBE Final Year Project Center in Chennai | BE Project in Velachery
Good to learn something new from this blog. Thanks for sharing such a worthy article. Keep updating.
ReplyDeleteMCA Final Year Project Center in Chennai | MCA Project in Tambaram
Marvelous and fascinating article. Incredible things you've generally imparted to us. Much obliged. Simply keep making this kind out of the post.
ReplyDeleteAngular JS Training in Chennai
React Training
Node JS Training
Really I enjoy this blog….. Very nice post… Thanks for sharing and keep updating
ReplyDeleteBE Final Year Project Center in Chennai | BE Project in Madipakkam
Thank you so much for sharing this. keep sharing.
ReplyDeleteNS2 Final Year Project Center in Chennai | NS2 Project in Tambaram
Excellent blog!!!Thanks for sharing. Keep doing more.
ReplyDeleteEnglish Speaking Classes in Bangalore
English Training Institutes in Bangalore
Spoken English Classes Bangalore
Best Spoken English Classes in JP Nagar Bangalore
Spoken English Institute in JP Nagar
Spoken English in JP Nagar
Spoken English Coaching Center near me
Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.Thanks for sharing.
ReplyDeleteJava Project Center in Chennai | Java Project in Chromepet
Informative blog and it was up to the point describing the information very effectively. Thanks to informative post...
ReplyDeleteMSC Final Year Project Center in Chennai | BSC Training in Guindy
Wow!! Really a nice Article. Thank you so much for your efforts. Definitely, it will be helpful for others. I would like to follow your blog. Share more like this. Thanks Again.
ReplyDeleteiot training in Chennai | Best iot Training Institute in Chennai
Very interesting blog which helps me to get the in depth knowledge about the technology, Thanks for sharing such a nice blog…
ReplyDeleteBE Final Year Project Center in Chennai | BE Training in Guindy
Gathered some useful information from your content. Keep updating more blog.
ReplyDeleteVLSI Final Year Project Center in Chennai | VLSI Training in Madipakkam
Thanks for sharing such a wonderful article.
ReplyDeleteBE Final Year Project Center in Chennai | BE Project Center in Chromepet
You are an awesome writer. The way you express things is very interesting. Waiting for your next post.
ReplyDeleteAndroid Final Year Project Center in Chennai | Android Training in Adambakkam
Good info..Kindly post more updates regarding this topics...
ReplyDeleteJava Final Year Project Center in Chennai | Android Project Center in Guindy | Java Project Center in Pallavaram
Keep sharing such type of useful information.
ReplyDeletePHP Final Year Project Center in Chennai | PHP Project Center in Tambaram | PHP Project Centers in Pallavaram
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คาสิโน
I enjoyed reading the Post. It was very informative and useful.
ReplyDeleteEmbedded Final Year Project Center in Chennai | Embedded Projects in Taramani
Great post and informative blog.it was awesome to read, thanks for sharing this great content to my vision.
ReplyDeleteMBA Final Year Project Center in Chennai | MBA Projects in Guindy
Great blog.you put Good stuff.All the topics were explained briefly.so quickly understand for me.Thanks for sharing.
ReplyDeleteDot Net Final Year Project Center in Chennai | Dot Net Projects in Meenambakkam
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.
ReplyDeleteTablet 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
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……..
ReplyDeleteVacation Courses in Chennai | Summer Classes in Pallikaranai
Thank you a lot for providing individuals with a very spectacular possibility to read critical reviews from this site.
ReplyDeleteVacation Classes in Chennai | Summer Courses in Besant Nagar
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
ReplyDeleteNice content! This post is having more kinds of information about this topic and thanks for providing a great post with huge knowledge. Keep sharing with us...
Embedded System Course Chennai
Embedded System Courses in Chennai
Excel Training in Chennai
Corporate Training in Chennai
Oracle Course in Chennai
Unix Training in Chennai
Power BI Training in Chennai
Embedded System Course Chennai
Embedded Training in Chennai
ReplyDeleteGreat Article
Android Final Year Project Ideas for Computer Science
Project Centers in Chennai
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
ReplyDeleteEnjoyed every bit of your blog article. Much obliged. customwritingservice
ReplyDeleteThanks a lot for sharing us about this update. Hope you will not get tired on making posts as informative as this.
ReplyDeleteReactJS Online Training
Excellent Blog. Thank you so much for sharing.
ReplyDeletebest react js training in chennai
react js training in Chennai
react js workshop in Chennai
react js courses in Chennai
react js tutorial
reactjs training Chennai
react js online training
react js training course content
react js online training india
react js training courses
react js training topics
react js course syllabus
react js course content
react js training institute in Chennai
Thank you for this informative blog
ReplyDeleteTop 5 Data science training in chennai
Data science training in chennai
Data science training in velachery
Data science training in OMR
Best Data science training in chennai
Data science training course content
Data science certification in chennai
Data science courses in chennai
Data science training institute in chennai
Data science online course
Data science with python training in chennai
Data science with R training in chennai
They are useful to people reading greatly. Thank you again!
ReplyDeletefifa55
Great Article
ReplyDeleteB.Tech Final Year Projects for CSE in Angular
Angular Training in Chennai
Project Centers in Chennai
JavaScript Training in Chennai
I needed to push it in the beginning of the array คาสิโนปอยเปต
ReplyDeleteThe 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
ReplyDeleteAmazing Article,Really useful information to all So, I hope you will share more information to be check and share here.
ReplyDeleteinplant training
inplant training chennai
inplant training meaning
inplant training certificate
inplant training report
report for inplant training
inplant training certificate format
inplant training meaning in tamil
what is inplant training
inplant training in chennai for mechanical
gazetted officer
ReplyDeletez or r twice
what is isp
space complexity
ng-focus
unexpected token o in json at position 1
do a barrel roll 20 times
cannot set headers after they are sent to the client
how to hack any instagram account 100% working
blink html google trick
Thanks for sharing this information and keep updating us. This information is really useful to me.
ReplyDeletecustom home problems
We are also certified in various networking technologies Custom IT Support
ReplyDeleteThanks for your sharing
ReplyDeletehawaiian shirt for men
เสื้อวินเทจชาย
เสื้อวินเทจ ผู้หญิง
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
ReplyDeleteI really appreciate the effort you made to share the knowledge. The topic here I found was really effective…
ReplyDeleteCheck this 1. Best Hacking Websites in Hindi
2. BLINK HTML GOOGLE TRICK
3. Turbo VPN VIP Apk link Click here to Latest Download
I visit your blog. It is really useful and easy to understand. Hope everyone gets benefit. Thanks for sharing your Knowledge and experience with us.
ReplyDeletewordpress
ufa88kh.blogspot
youtube
live casino
This or that Oracle is the best!!! Don’t know how it got this name in this short period!!! Anyways If you are not able to find your path make your own path. It’s also suitable for your career decision.make a smart move by visiting our website Oracle training in Chennai.Oracle Training in Chennai | Infycle Technologies
ReplyDeletePositive 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
ReplyDeleteThank you so much for sharing this information. Do visit pg projects in chennai
ReplyDelete