angular-meter-polyfill

HTML5 <meter> polyfill for AngularJS.

This plugin provides to your browser the feature of the tag <meter>. Behavior and style are taken by Google Chrome.

Usage

Install with bower:

    bower install angular-meter-polyfill

Import Angular and angular-meter-polyfill.min.js:

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-meter-polyfill/dist/angular-meter-polyfill.min.js"></script>

Import angular-meter-polyfill.min.css:

<link rel="stylesheet" href="bower_components/angular-meter-polyfill/dist/angular-meter-polyfill.min.css">

Add the polyfill module to your app module:

var app = angular.module('YourApp', ['angular-meter-polyfill']);

...that's all! Simply forgot the browser you are developing on!

The plugin checks if your browser is natively supporting the <meter> tag. If not, it attaches a directive for you.

Styling

If you want to provide a custom style to your <meter>, it is better to include the content of dist/angular-meter-polyfill.css in your own CSS and to modify it directly.

Support

Browsers that natively support <meter> (more):

• Google Chrome
• Firefox
• Opera
• Safari on Mac
• Android Browser 4.4.4+

Browsers currently supported by the polyfill:

• Internet Explorer 9+
• Safari on iOS 7+

We are still testing on other browsers

Known issues

In browser not supporting CSS3 gradients (IE9), the <meter> is styled with plain colors.