Fn-angular NPM

fn-angular - AngularJS directives for Foundation for Sites

$ 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

5 years ago