angular-reactable

0.0.1 • Public • Published

i-Reactable directives Build Status

These directives allows you to add the reactable/computable ability to your elements of a document.

Requirements

  • Nodejs(for toolkit chain)
  • Grunt(for testing)
  • Bower(the browser package manager)
  • AngularJS (>=v1.2.0-rc.1)

Install

We use bower for dependency management.

cd your_app
bower install angular-reactable --save

this will install angular-reactable and add the dependency into 'bower.json' file:

dependencies: {
  "angular-reactable": "latest"
}

Or write the dependency to your bower.json file. Then run

bower install

Usage

This will copy the angular-reactable files into your bower_components folder, along with its dependencies. Load the script files in your application:

<script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-reactable/i-reactable.js"></script>

Add the your wanted reactable directives as a dependency to your application module:

<script type="text/javascript" src="bower_components/angular-reactable/i-slidable.js"></script>
var myAppModule = angular.module('MyApp', ['iSlidable']);

Apply the directive to your form elements:

<div i-slidable="{min:1, max:40}" ng-model="x"></div>

directives

we have these reactable directives:

  • iSlidable: slide on the element to change value
  • iClickable: click on the element to change value
  • iPlayable: play carousel to change value.
  • iExecutable: the value is script code can be executable.

Working with ng-model

All the reactable directives plays nicely with ng-model.

and some helper directives:

  • iFlash
  • iHighlighted

Testing

We use karma (the new testacular) and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

hub clone snowyu/angular-reactable
npm install -g grunt-cli bower
npm install
bower install
grunt test

The karma task will try to open Firefox as a browser in which to run the tests. Make sure this is available or change the configuration in test\karma.conf.js

Readme

Keywords

none

Package Sidebar

Install

npm i angular-reactable

Weekly Downloads

3

Version

0.0.1

License

MIT

Last publish

Collaborators

  • riceball