Index

ngVibrant

License

AngularJS Bindings for Vibrant.js.

##Features

  • Exposes the Vibrant.js Library as Service
  • Easy access with the provided directive
  • Set global defaults for the color palette or quality
  • Automatic loading of the Vibrant.js Library (future Release)

##Installation You can install ngVibrant from bower with

bower install angular-vibrant

or download it directly from here.

##Usage You'll need to add ngVibrant as a dependency in your Angular Module Definition

angular.module('myApp', ['ngVibrant']);

and that's basically it. You can modify some settings of course, but most of the time you don't have to do this.

Now just access Vibrant.js as a Service or as a Directive.

###Directive ngVibrant provides an attribute as well as an element for easy access.

{{item.text}}

<div ng-repeat="item in items" ng-style="{'background-color': item.swatch.Vibrant.getHex()}">
    <vibrant url="{{item.image}}" ng-model="item.swatch"></vibrant>
</div>

###Service ngVibrant provides a server for easy access to the Vibrant.js Library. angular .module('myApp') .controller('MyCtrl', ['$vibrant', function($vibrant) { var swatches; swatches = $vibrant(element); //or $vibrant.get(url).then(function(loaded) { swatches = loaded; }); }]);