Hi Hubert,
You peeked my curiosity, I made an alternative solution, using a custom web
component, and ES6. Needs transpilation and a browsers supporting custom
components(chrome) For both are shims/polyfills if you are interested.
class MyComponent extends HTMLElement {
attachedCallback() {
// fetch the needed angular stuff
this.$element = angular.element(this)
this.$injector = this.$element.injector();
this.$compile = this.$injector.get("$compile")
this._render(this.getAttribute('name'))
}
attributeChangedCallback(attrName, oldVal, newVal) {
if (attrName === 'name') {
return this._render(newVal);
}
}
_render(tag) {
if ( !this.$injector.has(this._toCamel(tag)+'Directive')) {
// angular directive/component does not exist, nothing to do!
return console.error(this._toCamel(tag)+'Directive does not exists!')
}
let attrs = this._parseArgs();
let html = `<${tag} ${attrs}></${tag}>`
let comp = this.$compile(html)(this.$element.scope());
Array.from(comp).forEach(part => this.appendChild(part))
}
_parseArgs() { //returns the arguments as they would apear in the HTML
string
return Object.entries(JSON.parse(this.getAttribute('args'))).reduce((p,c
) => p + `${ c[0]}="${ c[1]}" `,"")
}
_toCamel(input) {
return input.toLowerCase().replace(/-(.)/g, function(match, group1) {
return group1.toUpperCase();
});
}
}
document.registerElement('my-component', MyComponent)
I did it outside angular, so I have better control on manipulating the
arguments. Turned out I didn't need too much of that tough ;)
Oh, here is it working in a fork of your plunk
<http://plnkr.co/edit/j4wLS6DMDGPvc4EqCkwP?p=preview>!
Hope it gives you a fresh view,
At least I had fun building this ;)
Regards
Sander
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
