pagePiling.js Angular Directive

Enhanced by BrowserStack

Beta 0.1.0

A simple pagePiling.js directive that allows the use of pagePiling.js within an angular app. There are several issues when using the the vanilla jquery version with an angular application that uses an internal router for displaying pages, and this repo aims to solve them.

Example - Source

Installation

Install via Download,

Bower

bower install --save angular-pagepiling.js

or NPM

npm install --save angular-pagepiling.js

====

Make sure to include both this directive and pagePiling.js. This package isn't a replacement.

index.html

<!-- Included dependancies:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="vendor/pagepiling.js/jquery.pagePiling.min.js"></script>
-->

<script src="vendor/angular-fullpage.js/angular-pagepiling.min.js"></script>

In your angular modules, include the Directive

app.module.js

angular
  .module('app', [
    'pagePiling.js'
    ...
  ]);

Add your standard pagePiling.js structure, along with the attribute full-page

someView.html

<div page-piling>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

Options

If you'd like to add some options to the pagePiling, just include them in an object in your controller, and add the options attribute to your html.

someView.html

function MainController(){

  var _this = this;

  _this.mainOptions = {
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
    navigation: true,
    navigationPosition: 'right'
    scrollingSpeed: 1000
  }

}

someView.html

<div page-piling options="vm.someOptions">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

You can even make them dynamic.