https://github.com/rochdev/angular-polymerize
Use Polymer elements from within AngularJS
https://github.com/rochdev/angular-polymerize
Last synced: 3 months ago
JSON representation
Use Polymer elements from within AngularJS
- Host: GitHub
- URL: https://github.com/rochdev/angular-polymerize
- Owner: rochdev
- License: mit
- Created: 2015-02-09T00:45:55.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-04-22T12:23:33.000Z (about 9 years ago)
- Last Synced: 2026-01-11T15:18:51.265Z (5 months ago)
- Language: HTML
- Homepage: https://github.com/rochdev/angular-polymerize
- Size: 42 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Polymerize [![Build][build-image]][build-url] [![Dependencies][deps-image]][deps-url] [![Version][version-image]][version-url] [![License][license-image]][license-url]
Creates [AngularJS][angular-url] directives with two-way data binding from [Polymer][polymer-url] elements so that they can be used in an AngularJS application.
## Installation
```sh
$ bower install angular-polymerize
```
## Usage
By default, all custom elements are automatically registered as AngularJS directives, which means you can use them as any other AngularJS directive:
```html
```
Please note that for this to work, Polymerize must be loaded before Polymer.
## Advanced configuration
If you need to register an element that was unavailable when the `polymer-ready` event was fired, you can use `polymerizeProvider` to do so:
```js
var module = angular.module('app', ['polymerize']);
module.config(function(polymerizeProvider) {
polymerizeProvider.directive('paperButton'); // single directive
polymerizeProvider.directive([
'paperCheckbox',
'paperInput'
]); // multiple directives
});
```
If you need to create your own directive on top of a Polymer element you may use the `polymerize` service directly from the directive instead:
```js
var module = angular.module('app', ['polymerize']);
module.directive('paperButton', function(polymerize) {
return {
restrict: 'E',
link: function postLink(scope, element, attrs) {
// your code
polymerize.link(scope, element, attrs);
}
};
});
```
## Example
See the [example](example) folder for a complete example.
## License
[MIT License][license-url]
[angular-url]: https://angularjs.org
[bootstrap-url]: https://docs.angularjs.org/api/ng/function/angular.bootstrap
[build-image]: http://img.shields.io/travis/rochdev/angular-polymerize/master.svg?style=flat-square
[build-url]: https://travis-ci.org/rochdev/angular-polymerize
[deps-image]: https://img.shields.io/gemnasium/rochdev/angular-polymerize.svg?style=flat-square
[deps-url]: https://gemnasium.com/rochdev/angular-polymerize
[license-image]: http://img.shields.io/badge/license-MIT-red.svg?style=flat-square
[license-url]: http://en.wikipedia.org/wiki/MIT_License
[ngapp-url]: https://docs.angularjs.org/api/ng/directive/ngApp
[polymer-url]: https://www.polymer-project.org
[version-image]: https://img.shields.io/github/tag/rochdev/angular-polymerize.svg?style=flat-square
[version-url]: https://github.com/rochdev/angular-polymerize