Load image via ng click tutorial

General use for loading an image is to use the img-cropper-fileread directive on an input element. However, it is also possible to load an image using an ng-click directive which can be added to elements such as an anchor. This can be achieved by implementing the following.

1. An input element is still required but can be hidden using ng-hide. The input element needs an id tag but can be called anything. Add to this element the img-cropper-fileread directive.

Example

<input type="file" id="fileInput" ng-hide="true" img-cropper-fileread image="cropper.sourceImage"/>

2. In your controller add an object to your scope. A directive will later add a function to this object.

Example

$scope.filepicker = {};

3. Add an anchor element. On the anchor element add an ng-click directive and pass in the object that you created on the scope. Ensure it calls a function called load (this will be added by the directive) which requires the name of the id that was assigned to the input element. Finally add the img-cropper-fileread-call directive which expects the object that we created in our controller.

Example

<a href ng-click="filepicker.load('#fileInput')" img-cropper-fileread-call control="filepicker">click me</a>

Example with JSBin<script src="http://static.jsbin.com/js/embed.js"></script>