fn-angular - AngularJS directives for Foundation for Sites

Dependencies

• AngularJS: 1.6.x
• Foundation-Sites: 6.4.1
• jQuery 2.4.2

Installation

$ bower install fn-angular --save

Module

To load all fn-angular modules in your application

angular.module('app', ['fn-angular']);

Otherwise you can load individual component modules

Components

• Reveal
• Sticky
• Toggler

Reveal

fnReveal directive

Module

Load the module in your application by adding it as a dependent module

angular.module('app', ['fn-angular-reveal']);

Usage

The fnReveal directive can only be used as an attribute

<ANY 
    fn-reveal="expression" 
    [fn-reveal-options="object"]
    ...
</ANY>

Arguments

| 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|

Events

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. |

Sticky

fnSticky directive

Module

Load the module in your application by adding it as a dependent module

angular.module('app', ['fn-angular-sticky']);

Usage

The fnSticky directive can only be used as an attribute

<ANY 
    fn-sticky
    [fn-sticky-options="object"]
    ...
</ANY>

Arguments

| 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|

Events

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 |

Toggler

fnToggler directive

Module

load the module in your application by adding it as a dependent module

angular.module('app', ['fn-angular-toggler']);

Usage

The fnToggler directive can only be used as an attribute

<ANY 
    fn-toggler="expression" 
    data-toggler="string">
    ...
</ANY>

Arguments

| 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|