fn-angular - AngularJS directives for Foundation for Sites
- AngularJS: 1.6.x
- Foundation-Sites: 6.4.1
- jQuery 2.4.2
$ bower install fn-angular --save
To load all fn-angular
modules in your application
angular.module('app', ['fn-angular']);
Otherwise you can load individual component modules
fnReveal
directive
Load the module in your application by adding it as a dependent module
angular.module('app', ['fn-angular-reveal']);
The fnReveal
directive can only be used as an attribute
<ANY
fn-reveal="expression"
[fn-reveal-options="object"]
...
</ANY>
Param | Type | Details |
---|---|---|
fnReveal | expression | If the expression is truthy/falsy then the element is hidden/shown respectively. |
fnRevealOptions | object | Optional parameters to customize the instance of Reveal. See foundation documentation here |
The fnReveal
directive will emit these events up the scope chain
Event | Description |
---|---|
open.fn.reveal | Fires when the modal has successfully opened. |
closed.fn.reveal | Fires when the modal is done closing. |
fnSticky
directive
Load the module in your application by adding it as a dependent module
angular.module('app', ['fn-angular-sticky']);
The fnSticky
directive can only be used as an attribute
<ANY
fn-sticky
[fn-sticky-options="object"]
...
</ANY>
Param | Type | Details |
---|---|---|
fnStickyOptions | object | Optional parameters to customize the instance of Sticky. This object follows the specification of the JavaScripit Foundation Sticky plugin options. See Foundation Sticky documentation here |
The fnSticky
directive will emit these events up the scope chain
Event | Description |
---|---|
stuckto.fn.sticky:top | Fires when the directive element has become position: fixed; to the top |
stuckto.fn.sticky:bottom | Fires when the directive element has become position: fixed; to the bottom |
unstuckfrom.fn.sticky:top | Fires when the directive element has become anchored |
unstuckfrom.fn.sticky:bottom | Fires when the directive element has become anchored |
fnToggler
directive
load the module in your application by adding it as a dependent module
angular.module('app', ['fn-angular-toggler']);
The fnToggler
directive can only be used as an attribute
<ANY
fn-toggler="expression"
data-toggler="string">
...
</ANY>
Param | Type | Details |
---|---|---|
fnToggler | expression | If the expression is truthy/falsy then the dataToggler class is added/removed from the element respectively. |
dataToggler | string | The class you wish to toggle. See foundation documentation here |