問題点私は、ハイブリッドモードで(UpgradeAdapterを使用して)ES5でAngular2属性ディレクティブを作成しようとしていますか?したがって、すべてのAngular2コードはNG1に変換されています。これはUpgradeAdapterの 'downgradeNG2Component'関数を使用して行いますが、コンポーネントではなくディレクティブを作成しているので、 'downgradeNG2Directive関数'を使用する必要があります。Angular2(ハイブリッドモード)はディレクティブをNG1(ES5)にダウングレードできません
ただし、NG1でコードを作成することはできませんか? - >いいえ私は角度1から2に移植しており、コード自体をAngular2にする必要があります
このディレクティブは " 。
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>