In the first part of this series about supporting
But to illustrate this point even further, lets continue with a previous discussion from the first part of this series. Namely the discussion about which adverb should be used for these event directives, "on" or "while". In the first part the directives used the "on" approach for each event. But this doesn't mean we still can't support "while". In fact, we already did in the original example by using both "on" events and storing the state in a scoped variable,
We can extrapolate that concept and create a directive that will do this automatically. There are a few ways as always to skin this cat. We could simply just bind the events independently of the focus and blur directives, but that isn't much fun. Alternatively we can use those directives (no need to reinvent the wheel) and just build on top of them. The later approach will also lead us down a new path which will include learning about a couple of very cool tools. Plus, it's more fun.
NOTE: This approach does have one possible issue: without specifying different scope variables to use between various elements within the same scope, they will of course share the same state indicator which would be very confusing. So, basically dumb in equals dumb out.
Okay, on to the fun! First give it a try so you know I am not full of it.
Boom! Still works. Now lets dig in. The first difference is the new directive
Now for the juicy parts but if you need to review how the previous directives work, go take a look here.
The
Step 4 is the key. Without it, the
IMPORTANT! This is where removing the directive for
And there you go. It should really be apparent now how directives are the building blocks of AngularJS.
Finally, as promised, here is the same directive using the new hotness of 1.2.0rc1. As you can see the directive is identical aside from using the new native
focus
and blur
events I elected to follow the template in the AngularJS source code for event directives. This proved to be quite insightful as the AngularJS team just released 1.2.0rc1 which now supports these events natively in the same manner. This means you can just drop in the new version, remove the custom directives and any dependencies on these directives should still work! Check it out for yourself!But to illustrate this point even further, lets continue with a previous discussion from the first part of this series. Namely the discussion about which adverb should be used for these event directives, "on" or "while". In the first part the directives used the "on" approach for each event. But this doesn't mean we still can't support "while". In fact, we already did in the original example by using both "on" events and storing the state in a scoped variable,
focused
.We can extrapolate that concept and create a directive that will do this automatically. There are a few ways as always to skin this cat. We could simply just bind the events independently of the focus and blur directives, but that isn't much fun. Alternatively we can use those directives (no need to reinvent the wheel) and just build on top of them. The later approach will also lead us down a new path which will include learning about a couple of very cool tools. Plus, it's more fun.
NOTE: This approach does have one possible issue: without specifying different scope variables to use between various elements within the same scope, they will of course share the same state indicator which would be very confusing. So, basically dumb in equals dumb out.
Okay, on to the fun! First give it a try so you know I am not full of it.
Boom! Still works. Now lets dig in. The first difference is the new directive
myng-focused
has replaced both myng-focus
and myng-blur
on the element. Also, only the scope variable focused
is passed now and not an AngularJS expression. Once last warning, remember to specify unique scope variables to track states for different elements unless you want to have a field day tracking down that bug.Now for the juicy parts but if you need to review how the previous directives work, go take a look here.
The
myngFocused
directive is basically doing four things.- Getting the scope variable name from the attribute
- Removing the attribute (this is important due to number 4)
- Sets the attributes for the
focus
andblur
directives - Recompiles the element
$set
. The trick here is that if no value is specified, the attribute is removed. Useful for step 4.Step 4 is the key. Without it, the
HTML
is updated but AngularJS takes no notice of the new attributes on the element. That is where $compile
comes into play. It's a fairly powerful and useful service in the AngularJS world and used quite extensively in the source code. We use it here to force Angular to recompile the element which triggers it to recognize the new directives, myngFocus
and myngBlur
.IMPORTANT! This is where removing the directive for
myngFocused
is crucial. If we omitted this step, when the element is recompiled AngularJS would see that directive and would attempt to initiate it. This would put it into a loop. Bad. It's why nearly all examples only use $compile
on children of an element. Consider yourself warned.And there you go. It should really be apparent now how directives are the building blocks of AngularJS.
Finally, as promised, here is the same directive using the new hotness of 1.2.0rc1. As you can see the directive is identical aside from using the new native
focus
and blur
directives.
This is my first visit to your blog, keep writing more content.
ReplyDeleteAndroid Training Institute in Chennai
android Training in Chennai
Java Training in Chennai
Python Training in Chennai
ReactJS Training in Chennai
AngularJS Training in Chennai
Thanks for sharing your views about the concept which you know much better. Its easy to read and understand by the way you wrote the blog contents.
ReplyDeleteAngularJS Training in Chennai
Web Designing Course in chennai
AngularJS Course in Chennai
Web Designing training in chennai
AngularJS Training in Anna Nagar
Web Designing Training in Velachery
AngularJS Training in T Nagar
Web designing Training in Tambaram
Through travel you gain a system for the history and huge touchstones that conveyed you to your present life and point in time.motel near waverly mo
ReplyDeleteUsually, I never comment on blogs but yours is so convincing that I never stop myself to say something about it. keep updating regularly.
ReplyDeleteGerman Classes in Mulund
German Language Classes in Mulund
French Classes in Mulund
French Classes in Mulund East
IELTS Classes in Mulund
IELTS Coaching in Mulund
English Speaking Classes in Mulund
English Speaking Classes in Mulund West
English Speaking Course in Mulund
For locals such situations are normal however outsiders become very stressful since they are unfamiliar to such stuff. check-distance.com
ReplyDeleteNice post..
ReplyDeletePython training in Chennai/
Python training in OMR/
Python training in Velachery/
Python certification training in Chennai/
Python training fees in Chennai/
Python training with placement in Chennai/
Python training in Chennai with Placement/
Python course in Chennai/
Python Certification course in Chennai/
Python online training in Chennai/
Python training in Chennai Quora/
Best Python Training in Chennai/
Best Python training in OMR/
Best Python training in Velachery/
Best Python course in Chennai/
This comment has been removed by the author.
ReplyDeleteTaldeen is one of the best plastic manufacturing company in Saudi Arabia. They are manufacturing Handling Solutions Plastic products like Plastic Pallets and plastic crates. Here is the link of the product
ReplyDeleteHandling Solutions
Plastic Pallets
Here is the details of best BSc Medical Imaging Technology Colleges in Bangalore. You can get the college details from the below link. BSc Medical Imaging Technology Course is one of the best demanding course in recent times in India
BSc Medical Imaging Technology Colleges In Bangalore
Christian College Bangalore providing BSc Medical Imaging Technology Course. Here is the link about the details of BSc Medical Imaging Technology. You can click the below link for more information about BSc Medical Imaging Technology.
BSc Cardiac Care Technology Colleges In Bangalore
Christian College Bangalore providing BSc Optometry Course. Here is the link about the details of BSc Optometry. You can click the below link for more information about BSc Optometry. BSc Optometry is one of the most demanding course in recent times.
Optometry Colleges In Bangalore
BBA Aviation course is the best (Most Demanded) management course in India. Here, Christian College Bangalore providing BBA Aviation course. You can get the details of Christian College BBA Aviation from the below mentioned link. If you are interested in BBA Aviation, just visit the below link to know about BBA Aviation.
BBA Aviation Colleges In Bangalore
GrueBleen is one of the Branding and Marketing agency Based in Riyadh- Saudi Arabia. The main functions of GrueBleen is Advertising, Branding, Marketing, Office Branding, Exhibition Management and Digital Marketing. Visit the below link to know more about GrueBleen Creative Club.
Branding Agency Riyadh
Marketing Agency Riyadh
Agriculture Solutions – Taldeen is a plastic manufacturing company in Saudi Arabia. They are manufacturing agricultural plastic products like greenhouse cover and hay cover. Visit the below link to know more details
Agriculture Solutions
Greenhouse Cover
Medical Imaging Technology – One of the most demanding allied health science course in recent times in India. Check out the details of Best BSc Medical Imaging Technology Colleges Details with the following link.
BSc Medical Imaging Technology Colleges In Bangalore
BSc Perfusion Technology – If you are looking to study BSc Perfusion Technology in Bangalore, just check out the following link. In that link you can get the details of Best BSc Medical Imaging Technology colleges in Bangalore
BSc Perfusion Technology Colleges in Bangalore
GrueBleen – One of the best social media marketing agency in Riyadh- Saudi Arabia. Visit here for the all service details of GrueBleen.
Social Media Marketing Agency
Aivivu chuyên vé máy bay, tham khảo
ReplyDeletesăn vé tết 2021
gia ve may bay di my
vé máy bay đi Pháp giá rẻ
vé máy bay đi hàn giá rẻ
vé máy bay nhật bản
vé máy bay đi Anh giá rẻ 2020
vé máy bay giá rẻ khuyến mại
Săn vé máy bay tại Aivivu, tham khảo
ReplyDeletevé máy bay đi Mỹ
chuyến bay đưa công dân về nước
bay nhật bản việt nam
chuyến bay thương mại từ canada về việt nam
It's very nice of you to share your knowledge through posts. I love to read stories about your experiences. They're very useful and interesting. I am excited to read the next posts. I'm so grateful for all that you've done. Keep plugging. Many viewers like me fancy your writing. Thank you for sharing precious information with us. Get for more information best bsc college in lucknow
ReplyDelete
ReplyDeleteHey what a brilliant post I have come across and believe me I have been searching out for this similar kind of post for past a week and hardly came across this. Thank you very much and will look for more postings from you Get for more information best bsc college in lucknow
Brilliant post. Thank you for sharing with us.
ReplyDeleteThirukkural pdf free download
Sai Satcharitra in English pdf
Sai Satcharitra in Tamil pdf
Sai Satcharitra in bengali pdf
Sai Satcharitra in gujarati pdf
Much obliged for sharing this brilliant substance. its extremely fascinating. Numerous web journals I see these days don't actually give whatever pulls in others however the manner in which you have plainly clarified everything it's truly awesome. There are loads of posts But your method of Writing is so Good and Knowledgeable. continue to post such helpful data and view my site too...
ReplyDeletehow to make a paper airplane eagle | how to make a boomerang airplane | the eagle paper airplane | best paper airplane design for distance and accuracy | best paper airplanes for distance and speed | what is the best paper airplane design for distance | paper airplane that flies far and straight | nakamura lock paper airplane instructions | paper airplane templates for distance | science behind paper airplanes | how to make a paper airplane that flies far and straight step by step | classic dart paper airplane
Mmorpg oyunları
ReplyDeleteİNSTAGRAM TAKİPCİ SATİN AL
TİKTOK JETON HİLESİ
Tiktok jeton hilesi
saç ekimi antalya
referans kimliği nedir
İnstagram takipçi satın al
metin2 pvp serverlar
instagram takipçi satın al
Good content. You write beautiful things.
ReplyDeletehacklink
vbet
vbet
mrbahis
mrbahis
hacklink
korsan taksi
taksi
sportsbet
Good text Write good content success. Thank you
ReplyDeleteslot siteleri
betpark
kibris bahis siteleri
poker siteleri
kralbet
betmatik
mobil ödeme bahis
tipobet
elf bar
ReplyDeletebinance hesap açma
sms onay
G6256
elazığ
ReplyDeletekağıthane
kastamonu
nevşehir
niğde
yalova
GLİİ
bilecik
ReplyDeletegebze
ısparta
şırnak
alsancak
PZF0
https://saglamproxy.com
ReplyDeletemetin2 proxy
proxy satın al
knight online proxy
mobil proxy satın al
E5OX
bayburt
ReplyDeletebeykoz
beyoğlu
bilecik
bingöl
0KE
burdur
ReplyDeletebursa
çanakkale
çankırı
çorum
denizli
diyarbakır
JX1
glassagram
ReplyDeleteallsmo
instagram gizli hesap görme
revelio
bestwhozi
6K0