AngularJS directives as native HTML elements (web components)
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.
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
- AngularJS
- X-Tag core or Polymer custom elements or native browser support for custom elements.
License
Copyright 2015 Stepan Suvorov aka stevermeister, Denis Radin aka PixelsCommander