48 lines
1.1 KiB
JavaScript
48 lines
1.1 KiB
JavaScript
|
(function(app) {
|
||
|
|
|
||
|
|
// #docregion
|
||
|
|
var TitleComponent = ng.core.Component({
|
||
|
|
selector: 'hero-title',
|
||
|
|
template:
|
||
|
|
'<h1>{{titlePrefix}} {{title}}</h1>' +
|
||
|
|
'<button (click)="ok()">OK</button>' +
|
||
|
|
'<ng-content></ng-content>'
|
||
|
|
}).Class({
|
||
|
|
constructor: [
|
||
|
|
[
|
||
|
|
new ng.core.Optional(),
|
||
|
|
new ng.core.Inject('titlePrefix')
|
||
|
|
],
|
||
|
|
new ng.core.Attribute('title'),
|
||
|
|
[
|
||
|
|
new ng.core.Query('okMsg'),
|
||
|
|
ng.core.ElementRef
|
||
|
|
],
|
||
|
|
function(titlePrefix, title, msg) {
|
||
|
|
this.titlePrefix = titlePrefix;
|
||
|
|
this.title = title;
|
||
|
|
this.msg = msg;
|
||
|
|
}
|
||
|
|
],
|
||
|
|
ok: function() {
|
||
|
|
var msgEl =
|
||
|
|
this.msg.first.nativeElement;
|
||
|
|
msgEl.textContent = 'OK!';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// #enddocregion
|
||
|
|
|
||
|
|
var AppComponent = ng.core.Component({
|
||
|
|
selector: 'hero-di-inject-additional',
|
||
|
|
template: '<hero-title title="Tour of Heroes">' +
|
||
|
|
'<span #okMsg class="ok-msg"></span>' +
|
||
|
|
'</hero-title>',
|
||
|
|
directives: [TitleComponent]
|
||
|
|
}).Class({
|
||
|
|
constructor: function() { }
|
||
|
|
});
|
||
|
|
|
||
|
|
app.HeroDIInjectAdditionalComponent = AppComponent;
|
||
|
|
|
||
|
|
})(window.app = window.app || {});
|