Angular2 (하이브리드 모드) 지시문을 NG1 (ES5)

다운 그레이드 할 수 없다 내 문제는 하이브리드 모드 (UpgradeAdapter 사용) 동안 ES5에서 Angular2 특성 지시문을 만들려고합니다. 그래서 모든 Angular2 코드는 NG1로 변환됩니다. 이것은 UpgradeAdapter의 'downgradeNG2Component'기능을 사용하여 수행됩니다. 그러나 구성 요소가 아닌 지시문을 생성하기 때문에 'downgradeNG2Directive 함수'를 사용해야합니다. 존재하지 않지만 .Angular2 (하이브리드 모드) 지시문을 NG1 (ES5)

하지만 NG1에서 코딩 할 수는 없습니까? -> No 1에서 2로 포팅 중이므로 코드 자체가 Angular2가되어야합니다.

지시어는 "li-common-auto-focus"가 속성 일 때마다 요소를 포커스하는 간단한 autoFocus 지정 문입니다 .

TLDR : upgradeAdapter를 사용하여 Angular2 속성 지시문을 NG1로 변환하는 방법이 있는지 궁금합니다. 여기

코드입니다 :

AutoFocus.js

//<example> 
// <file name="index.html"> 
//  <input class="type-text" type="text" li-common-auto-focus> 
// </file> 
// </example> 


var autoFocusModule = angular.module('li.directives.common.auto-focus', []); 
var liCommonAutoFocus = ng.core 
    .Directive({ 
     selector:"li-common-auto-focus", 
     inputs:["ignoreMe"] 
    }) 
    .Class({ 
     constructor:[ng.core.ElementRef, function(eltRef){ 
     console.log(eltRef); 
     console.log(eltRef.nativeElement); 
     }], 
     ngAfterViewInit:function(){ 

     } 
}); 

autoFocusModule.directive(OBJ.Angular.upgradeAdapter.downgradeNg2Component(liCommonAutoFocus));

init.js로

var OBJ = { 
    Angular: { 
    upgradeAdapter: new ng.upgrade.UpgradeAdapter() 
    } 
};

bootstrap.js

OBJ.Angular.upgradeAdapter.bootstrap(document.body, ['li.directives.common.auto-focus']);

HTML

<html> 
    <head> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="https://code.angularjs.org/1.5.6/angular.min.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.umd.min.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-all.umd.dev.js"></script> 
    </head> 

    <body> 

    <div>Testing</div> 
    <input class="type-text" size="50px" type="text" placeholder=""> 
    <input class="type-text" size="50px" type="text" placeholder="Should Focus ME" li-common-auto-focus> 
    <input class="type-text" size="50px" type="text" placeholder=""> 


    <script src="init.js"></script> 
    <script src="auto-focus.js"></script> 
    <script src="bootstrap.js"></script> 
    </body> 

</html>

출처

2016-07-22 jgramling17