I have the following Angular 1 directive:
return function(module) {
module.directive('myButtonUpgrade', myButtonUpgrade);
function myButtonUpgrade() {
return {
restrict: 'E',
template: template(),
scope: {
image: '=',
imageColour: '='
}
};
function template() {
var html = '<my-button visible="flipVisible"\
enabled="enabled"\
image="{{::image}}"\
image-colour="{{::imageColour}}"\
</my-button>';
return html;
}
}
return myButtonUpgrade;
};
The directive uses "my-button" directive inside its template. The "my-button" directive requires "image" and "image-colour" attribute values to be present before compile its template.
I have got the following Angular 2 component which upgrades Angular 1:
import { Component } from '@angular/core';
import { upgradeAdapter } from '../../../upgrade/index';
var myButtonEx = upgradeAdapter.upgradeNg1Component('myButtonUpgrade');
@Component({
selector: 'my-button-ex',
template: '<my-button-ex [image]="refresh"></my-button-ex>',
directives: [myButtonEx]
})
export class ButtonExComponent {
}
As you can see the template sets [image] bindings to "refresh", however that did not resolve when rendering "my-button-ex" Angular 1 directive.
It looks like the upgrade adapter tries to compile HTML syntax first without resolving template arguments:
upgrade_ng1_adapter.ts
compileTemplate(...){
this.linkFn = compileHtml(this.directive.template);
}
"this.directive.template" - template arguments not resolved!
Any ideas?