honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ngUpgrade): transclude content from ng2->ng1 

Closes #4640
This commit is contained in:
Misko Hevery 2015-10-09 21:31:42 -07:00
parent 84c3124292
commit 19c1bd7375
3 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
modules/upgrade/src/angular.d.ts vendored
View File

@ -7,7 +7,14 @@ declare namespace angular {
run(a: any);
}
interface ICompileService {
(element: Element): (IScope) => void;
(element: Element, transclude?: Function): ILinkFn;
}
interface ILinkFn {
(scope: IScope, cloneAttachFn?: Function, options?: ILinkFnOptions): void
}
interface ILinkFnOptions {
parentBoundTranscludeFn?: Function, transcludeControllers?: {[key: string]: any},
futureParentElement?: Node
}
interface IRootScopeService {
$new(): IScope;

12
modules/upgrade/src/ng1_facade.ts
View File

@ -112,8 +112,16 @@ class Ng1ComponentFacade implements OnChanges, DoCheck {
private inputs: string[], private outputs: string[], private propOuts: string[],
private checkProperties: string[], private propertyMap: {[key: string]: string}) {
var chailTail = scope.$$childTail; // remember where the next scope is inserted
compile(elementRef.nativeElement)(scope);
var element: Element = elementRef.nativeElement;
var childNodes: Node[] = [];
var childNode;
while (childNode = element.firstChild) {
element.removeChild(childNode);
childNodes.push(childNode);
}
element.appendChild(element.ownerDocument.createElement('ng-transclude'));
compile(element)(scope, null,
{parentBoundTranscludeFn: (scope, cloneAttach) => cloneAttach(childNodes)});
// If we are first scope take it, otherwise take the next one in list.
this.componentScope = chailTail ? chailTail.$$nextSibling : scope.$$childHead;

20
modules/upgrade/test/integration_spec.ts
View File

@ -34,24 +34,26 @@ export function main() {
});
}));
it('should instantiate ng1 in ng2 template', inject([AsyncTestCompleter], (async) => {
var upgradeModule: UpgradeModule = createUpgradeModule();
it('should instantiate ng1 in ng2 template and project content',
inject([AsyncTestCompleter], (async) => {
var upgrMod: UpgradeModule = createUpgradeModule();
var Ng2 = Component({selector: 'ng2-1'})
.View({
template: `{{ 'ng2(' }}<ng1></ng1>{{ ')' }}`,
directives: [upgradeModule.exportAsNg2Component('ng1')]
template: `{{ 'ng2(' }}<ng1>{{'transclude'}}</ng1>{{ ')' }}`,
directives: [upgrMod.exportAsNg2Component('ng1')]
})
.Class({constructor: function() {}});
upgradeModule.ng1Module.directive('ng1',
() => { return {template: 'ng1 {{ "WORKS" }}!'}; });
upgradeModule.importNg2Component(Ng2);
upgrMod.ng1Module.directive('ng1', () => {
return {transclude: true, template: '{{ "ng1" }}(<ng-transclude></ng-transclude>)'};
});
upgrMod.importNg2Component(Ng2);
var element = html("<div>{{'ng1('}}<ng2-1></ng2-1>{{')'}}</div>");
upgradeModule.bootstrap(element).ready(() => {
expect(document.body.textContent).toEqual("ng1(ng2(ng1 WORKS!))");
upgrMod.bootstrap(element).ready(() => {
expect(document.body.textContent).toEqual("ng1(ng2(ng1(transclude)))");
async.done();
});
}));