The ng-ebi-foundation is an Angular library that provides two directives to
reinvoke Foundation on specific components (see examples below).
To fully benefit from Foundation, jQuery has to be properly set up and the
.foundation() function called on every new or updated component.
The major differences between the two directives are:
ebiReloadFoundation is a lighter option, because it reinvokes Foundation
only when the element view is initialized. It doesn't reinvoke
Foundation afterwards. Initial Foundation setup is achieved when the init
value is passed to the directive (ebiReloadFoundation="init"). In this
case, Foundation is invoked on the whole document and executes
foundationExtendEBI (mostly necessary on the initial setup). Usually, there
is only a single ebiReloadFoundation="init" in the application but many
ebiReloadFoundation spread among components.
ebiAutoFoundation is experimental at the moment. It detects mutation in
the DOM of the element and reinvokes Foundation. This could cause very
frequent invocations to Foundation, depending on the application and how it
is used. Use this directive with care.
Foundation and single-page applications, like Angular, are not an ideal
combination. Foundation wasn't written with these frameworks in mind (plus the
size increase of using jQuery). Continuous reinvocations of Foundation could
slow down the application and produce a lot of DOM garbage (for example, each
time a tooltip is generated a hidden DOM element is created, but never removed).
There maybe better ways to use Foundation and Angular using directly the plugins
(see
this example).