Introduction:
This article mainly focuses on a solution of a common problem that usually
being faced doing projects with angular and other JavaScript Frameworks.
It's
recommended that a basic knowledge of Angular data binding and directive is
required for reading this article. A demo application is also created to
help understand the solution more in detail.
Problem:
Often we need to bind different JavaScript events or
initialize Jquery plugin after ng-bind-html or ng-repeat finished binding. As most
of the time the data is retrieved from AJAX call so it's hard to estimate exact
time when the DOM will be ready to bind those events or initialize plugins
for new loaded element. One very common example would be, when we make a custom
dynamic menu where data are bound using ng-repeat and jQuery is used to make
all the animation. So the
jQuery function,
which contains the animation code, must call after data loaded successfully and
angular completed binding all the DOM elements.
Solution:
We
can solve this problem by creating a custom directive and send a callback
function to that directive. For ng-repeat the directive will check whether
scope's last object has completed binding and after that it will call the given
callback function. Now for ng-html-bind it will watch scope’s htmlElement has
any value and when it will see a value, it will call the given callback function.
So here is a generic directive that will work for both ng-repeat and
ng-html-bind:
app.directive('ngcDone', function ($timeout) { return function (scope, element, attrs) { scope.$watch(attrs.ngcDone, function (callback) { if (scope.$last === undefined) { scope.$watch('htmlElement', function () { if (scope.htmlElement !== undefined) { $timeout(eval(callback), 1); } }); } if (scope.$last) { eval(callback)(); } }); } });
Let me give a short description of what is happening here.
But before that it is important to know what is directive.
Directives are markers of DOM element which allow you to play with that specific DOM element.
Here we have created a custom directive name ngc-done and
sending a callback function as string. The reason for sending it as string is
just to make this directive a generic one. Like here if we want call a function
which is define under scope then we can give it like ‘scope.YourFunction’.
We’ve used $watch inside the directive’s definition to track
changes of our directive. $watch is a great feature of Angular and it takes two
parameters. One is the object or property that we like to watch or track
changes and another is a listener which will be called if any change is
detected. Now we have used two $watch here. One is to track change of our
directive and another is to track change of scope’s htmlElement if $last is
undefined.
Now the $last is a
property of scope which is related to ng-repeat and it’s a Boolean type and it
will return true here if ng-repeat has finished binding the last value or
object. $last will return undefined if
there is no ng-repeat in the DOM element. If this directive is used in the same
element where ng-html-bind is used then $last will be undefined and then it
will start watching scope’s htmlElement. If htmlElement is not undefined then
directive will invoke the given callback function.
Using the Code:
It is recommended to download the source and there are three
examples showing how to use this directive. 2 examples showing how to bind dynamic jQuery menu plugin, one with ng-repeat and another with a ng-html-bind and another example shows how to
bind 2 lists and call callback function after it finished
binding. The menu plugin that we've used here is available for purchase at
CodeCanyon.
Referrences:
- AngularJs API Docs: https://docs.angularjs.org/api
- John Papa: http://www.johnpapa.net/
- Dan Wahlen: https://weblogs.asp.net/dwahlin
- Ben Nadel: http://www.bennadel.com/
Thanks for sharing this valuable information to our vision. You have posted
ReplyDeletea trust worthy blog keep sharing.
Angularjs Training In Hyderabad
Thank you very much :)
DeleteI've been looking for a similar solution for days. Thank you very much.
ReplyDeleteI'm glad it helped you :)
DeleteI am using Angular v1.3.18. Its working fine for me. Really I had a hectic over the month. You saved my time. Pretty neat. its worked fine.
ReplyDeleteI'm glad that it helped you :D
DeleteThank you man.. it helped me a lot..
ReplyDeleteGetting this error:
ReplyDeleteTypeError: eval(...) is not a function
for ng-bind-html
instagram takipçi satın al
ReplyDeletecasino siteleri
NAGF
çekmeköy
ReplyDeletekepez
manavgat
milas
balıkesir
75C4E0
bayrampaşa
ReplyDeletegüngören
hakkari
izmit
kumluca
R5Y
resimli magnet
ReplyDeleteresimli magnet
çerkezköy çatı ustası
silivri çatı ustası
dijital kartvizit
7SPİ3T
Antalya
ReplyDeleteKonya
Adana
Ankara
Van
N6İJ7
Adana
ReplyDeleteElazığ
Kayseri
Şırnak
Antep
DAT
elazığ
ReplyDeletebilecik
kilis
sakarya
yozgat
USB1
https://titandijital.com.tr/
ReplyDeletekars parça eşya taşıma
konya parça eşya taşıma
çankırı parça eşya taşıma
yalova parça eşya taşıma
BFZD
ankara parça eşya taşıma
ReplyDeletetakipçi satın al
antalya rent a car
antalya rent a car
ankara parça eşya taşıma
İKQUVN
karabük evden eve nakliyat
ReplyDeletebartın evden eve nakliyat
maraş evden eve nakliyat
mersin evden eve nakliyat
aksaray evden eve nakliyat
2W1QC
urfa evden eve nakliyat
ReplyDeletemalatya evden eve nakliyat
burdur evden eve nakliyat
kırıkkale evden eve nakliyat
kars evden eve nakliyat
8R6X2
hatay evden eve nakliyat
ReplyDeleteısparta evden eve nakliyat
erzincan evden eve nakliyat
muğla evden eve nakliyat
karaman evden eve nakliyat
TSVHEQ
ığdır evden eve nakliyat
ReplyDeletebitlis evden eve nakliyat
batman evden eve nakliyat
rize evden eve nakliyat
niğde evden eve nakliyat
UVQ5F
tekirdağ evden eve nakliyat
ReplyDeletekocaeli evden eve nakliyat
yozgat evden eve nakliyat
osmaniye evden eve nakliyat
amasya evden eve nakliyat
21XW
A875D
ReplyDeleteEdirne Şehirler Arası Nakliyat
Iğdır Lojistik
Muş Parça Eşya Taşıma
Hakkari Şehir İçi Nakliyat
Kırşehir Parça Eşya Taşıma
Yalova Şehirler Arası Nakliyat
Kastamonu Şehirler Arası Nakliyat
Giresun Lojistik
Amasya Parça Eşya Taşıma
6E208
ReplyDeleteIğdır Şehir İçi Nakliyat
Muş Evden Eve Nakliyat
Ünye Televizyon Tamircisi
Karabük Lojistik
Ordu Lojistik
Antep Lojistik
Tekirdağ Şehir İçi Nakliyat
Çerkezköy Oto Boya
Bitrue Güvenilir mi
135C4
ReplyDeleteSivas Şehir İçi Nakliyat
Bursa Evden Eve Nakliyat
Bartın Şehirler Arası Nakliyat
Muş Parça Eşya Taşıma
Maraş Evden Eve Nakliyat
Afyon Lojistik
Big Wolf Coin Hangi Borsada
Floki Coin Hangi Borsada
Bingöl Şehirler Arası Nakliyat
0EE3D
ReplyDeleteBingöl Şehir İçi Nakliyat
Rize Şehir İçi Nakliyat
Isparta Parça Eşya Taşıma
Kocaeli Lojistik
Giresun Parça Eşya Taşıma
Gümüşhane Parça Eşya Taşıma
İstanbul Şehirler Arası Nakliyat
Çerkezköy Boya Ustası
Uşak Şehirler Arası Nakliyat
08474
ReplyDeleteÇerkezköy Çekici
Kars Parça Eşya Taşıma
winstrol stanozolol
Aksaray Şehir İçi Nakliyat
Elazığ Şehir İçi Nakliyat
Uşak Evden Eve Nakliyat
Ağrı Parça Eşya Taşıma
Iğdır Şehir İçi Nakliyat
İzmir Lojistik
83627
ReplyDeleteBitcoin Nasıl Alınır
Referans Kimliği Nedir
Çerkezköy Cam Balkon
Etlik Parke Ustası
Çerkezköy Televizyon Tamircisi
Gölbaşı Fayans Ustası
Etlik Boya Ustası
Iğdır Evden Eve Nakliyat
Referans Kimliği Nedir
526C0
ReplyDeleteNiğde Evden Eve Nakliyat
Bitmart Güvenilir mi
Diyarbakır Evden Eve Nakliyat
Çerkezköy Bulaşık Makinesi Tamircisi
Çerkezköy Asma Tavan
Antalya Evden Eve Nakliyat
Ünye Marangoz
Tekirdağ Çatı Ustası
Sincan Parke Ustası
09042
ReplyDeleteÇerkezköy Ekspertiz
Samsun Lojistik
Çerkezköy Buzdolabı Tamircisi
Düzce Evden Eve Nakliyat
Balıkesir Şehirler Arası Nakliyat
Aksaray Şehir İçi Nakliyat
Ankara Şehir İçi Nakliyat
buy deca durabolin
Bursa Şehirler Arası Nakliyat
1BF92
ReplyDeletereferanskodunedir.com.tr
BBD8D
ReplyDeletebinance indirim kodu %20
10FEF
ReplyDeleteAlyattes Coin Hangi Borsada
Pi Network Coin Hangi Borsada
Hexa Coin Hangi Borsada
Binance Borsası Güvenilir mi
Bitcoin Kazanma Siteleri
Bitcoin Nedir
Tiktok Takipçi Hilesi
Threads Yeniden Paylaş Hilesi
Bulut Madenciliği Nedir
D6942
ReplyDeletetoptan sabun
bitcoin giriş
toptan mum
gate io
referans kimliği
probit
mobil 4g proxy
en düşük komisyonlu kripto borsası
bingx
23C3E
ReplyDeletebitexen
mobil 4g proxy
bitcoin giriş
bingx
4g mobil proxy
en düşük komisyonlu kripto borsası
kripto para nereden alınır
btcturk
kızlarla canlı sohbet
wevbcnbcfhggfhtyhtr
ReplyDeleteمهندس افران جدة