Allows to use AngularJS directive as HTML element
HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dist
src
.gitignore
README.md
bower.json
gulpfile.js
package.json

README.md

Reactive Elements

AngularJS directives as native HTML elements (web components)

![Gitter](https://badges.gitter.im/Join Chat.svg)

Tiny Google Polymer or Mozilla X-Tags add-on which allows to use AngularJS components as custom HTML elements. Also works with a native Custom Elements implementation if present.

Demo

Example

Using component in HTML

<body>
	<my-angular-component items="{window.someArray}"></my-angular-component>
</body>

Angular directive definition

angular.module('demo', []).directive('angularList', function () {
    return {
        restrict: 'E',
        scope: {},
        template: '<ul><li ng-repeat="x in items">{{ x }}</li></ul>',
        link: function (scope) {
            scope.testMethod = function () {
                alert('Directive method called as node method');
            }
        }
    };
});

document.registerAngular('my-angular-component', 'demo');

Find complete examples in corresponding folder.

Nesting

Original content of a custom element is injected to component as:

<my-angular-component>Hello world</my-angular-component>

In this case we can use "Hello world" as transclude to "my-angular-component" directive.

Dependencies

License

MIT: http://mit-license.org/

Copyright 2015 Stepan Suvorov aka stevermeister, Denis Radin aka PixelsCommander