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.
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.
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.
- AngularJS
- X-Tag core or Polymer custom elements or native browser support for custom elements.
Copyright 2015 Stepan Suvorov aka stevermeister, Denis Radin aka PixelsCommander
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent