angularjs fullpage全屏滚动插件

1.bower 安装 

bower install --save angular-fullpage.js

2.index.html引入

<link href="lib/fullpage/jquery.fullPage.css"></link>

<script src="lib/fullpage/vendors/jquery.slimscroll.min.js"></script>
<script src="lib/fullpage/jquery.fullPage.min.js"></script>

3.directives 自定义指令

var aciAPP = angular.module('aciAPP', [ 'ui.router'])

aciAPP.directive('fullPage', fullPage);
  fullPage.$inject = ['$timeout'];
  function fullPage($timeout) {
    var directive = {
      restrict: 'A',
      scope: {options: '='},
      link: link
    };

    return directive;

    function link(scope, element) {
      var pageIndex;
      var slideIndex;
      var afterRender;
      var onLeave;
      var onSlideLeave;

      if (typeof scope.options === 'object') {
        if (scope.options.afterRender) {
          afterRender = scope.options.afterRender;
        }

        if (scope.options.onLeave) {
          onLeave = scope.options.onLeave;
        }

        if (scope.options.onSlideLeave) {
          onSlideLeave = scope.options.onSlideLeave;
        }
      } else if(typeof options === 'undefined') {
        scope.options = {};
      }

      var rebuild = function() {
        destroyFullPage();

        $(element).fullpage(sanatizeOptions(scope.options));

        if (typeof afterRender === 'function') {
          afterRender();
        }
      };

      var destroyFullPage = function() {
        if ($.fn.fullpage.destroy) {
          $.fn.fullpage.destroy('all');
        }
      };

      var sanatizeOptions = function(options) {
        options.afterRender = afterAngularRender;
        options.onLeave = onAngularLeave;
        options.onSlideLeave = onAngularSlideLeave;

        function afterAngularRender() {
          //We want to remove the HREF targets for navigation because they use hashbang
          //They still work without the hash though, so its all good.
          if (options && options.navigation) {
            $('#fp-nav').find('a').removeAttr('href');
          }

          if (pageIndex) {
            $timeout(function() {
              $.fn.fullpage.silentMoveTo(pageIndex, slideIndex);
            });
          }
        }

        function onAngularLeave(page, next, direction){
          if (typeof onLeave === 'function' && onLeave(page, next, direction) === false) {
            return false;
          }
          pageIndex = next;
        }

        function onAngularSlideLeave(anchorLink, page, slide, direction, next) {
          if (typeof onSlideLeave === 'function' && onSlideLeave(anchorLink, page, slide, direction, next) === false) {
            return false;
          }
          pageIndex   = page;
          slideIndex  = next;
        }

        //if we are using a ui-router, we need to be able to handle anchor clicks without 'href="#thing"'
        $(document).on('click', '[data-menuanchor]', function () {
          $.fn.fullpage.moveTo($(this).attr('data-menuanchor'));
        });
        return options;
      };

      var watchNodes = function() {
        return element[0].getElementsByTagName('*').length;
      };
      scope.$watch(watchNodes, rebuild);
      scope.$watch('options', rebuild, true);
      element.on('$destroy', destroyFullPage);
    }
  }

4.  angular单页路由配置 state中加入（controllerAs:‘vm‘）,controller就是定义$scope作用域连用的，controllerAs可以用原声js 的this

    $stateProvider
        .state('aolsee.home', {
            url: '/home',
            templateUrl: 'templates/aolsee/home.html',
            controller: 'HomeController',
            controllerAs:'vm'
        })

5.controller控制器

this.homeOptions = {

  //不使用css3 transforms滚动

  css3:false,

  //重新设置滚动方式
  easing: 'easeInExpo',

  //滚动速度
  scrollingSpeed:'1000',

  afterLoad: function(anchorLink, index){

  //滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算

  },

 onLeave: function(index, nextIndex, direction){

  //滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：
//index 是离开的“页面”的序号，从1开始计算；
//nextIndex 是滚动到的“页面”的序号，从1开始计算；
//direction 判断往上滚动还是往下滚动，值是 up 或 down

  }

}

6.home.html使用指令

//一个section为一屏,内容可自由添加

<div full-page options="vm.homeOptions">
  <div class="section"></div>

  <div class="section"></div>

  <div class="section"> </div>

  <div class="section"></div>

</div>

7.效果图