My problem I am trying to create an Angular2 attribute directive in ES5 while still in hybrid mode (using the UpgradeAdapter ). Thus, all Angular2 code is converted down to NG1.This is done using the UpgradeAdapter function 'downGradeNG2Component', but since I am creating a Directive, not a Component, I need to use the downgradeNG2Directive function, t exists.
But can't you just encode it in NG1? → No. I am migrating from angular from 1 to 2 and I need Angular2 code
A directive is just a simple autoFocus directive that focuses an element when "li-common-auto-focus" is an attribute.
TL; DR: I wonder if there is a way to convert the Angular2 attribute directive to NG1 using upgradeAdapter?
Here is the code:
AutoFocus.js
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>
source
share