Package Exports

ng-preview-cover

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng-preview-cover) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngPreviewCover

demo image

This is a preview cover like fb personal cover.

Install

bower install ng-preview-cover

npm install ng-preview-cover

Install node modules

npm install

Dependency

angularjs

Support

IE10
chrome
firefox

Usage

Set some attributes

<div ng-preview-cover
     drag-text="drag photo"
     update-button-text="update cover photo"
     image="image"
     on-load="onLoad(base64)"
     on-cancel="onCancel()"
     cover-loading="coverLoading" 
     on-enter="onEnter()"></div>

Listen some events

app.controller('previewCoverCtrl',function( $scope ){

  angular.extend( $scope,{
    onLoad:function( base64 ){
      //base64 == $scope.image
      //do something...
    },
    onCancel:function(){
      //do something...
    },
    onEnter:function(){
      //do something...
    }
  });
});

Attribute

image(optional)

Cover image

update-button-text

A updating button text

drag-text

A dragging message

coverLoading(optional)

open or close a loading block

mode

Set disabled if you want to hide the camera button.

<div ng-preview-cover mode="disabled" />

Event

onEnter

onLoad(base64:String)

onCancel

Service

on(name,func)

Set a common action by event

app.run(function( previewCover ){

  previewCover.on('load', function( evt ){
    //do something...
  });
});

DEMO

gulp server

Build

gulp