Javascript Angular2（混合模式）can'；对NG1（ES5）的降级指令_Javascript_Angularjs_Angularjs Directive_Angular

Javascript Angular2（混合模式）can'；对NG1（ES5）的降级指令

javascript angularjs angular

Javascript Angular2（混合模式）can'；对NG1（ES5）的降级指令,javascript,angularjs,angularjs-directive,angular,Javascript,Angularjs,Angularjs Directive,Angular,我的问题是，我试图在ES5中创建Angular2属性指令，同时仍处于混合模式（使用）。因此，所有Angular2代码都被转换为NG1。这是通过利用UpgradeAdapter的“DegradeNG2Component”函数实现的，但由于我创建的是指令而不是组件，所以我需要使用“DegradeNG2Directive函数”，尽管它不存在但是你不能用NG1编码吗？->不，我正在从Angular1移植到2，需要代码本身是Angular2 该指令只是一个简单的自动聚焦指令，只要“li common a

我的问题是，我试图在ES5中创建Angular2属性指令，同时仍处于混合模式（使用）。因此，所有Angular2代码都被转换为NG1。这是通过利用UpgradeAdapter的“DegradeNG2Component”函数实现的，但由于我创建的是指令而不是组件，所以我需要使用“DegradeNG2Directive函数”，尽管它不存在

但是你不能用NG1编码吗？->不，我正在从Angular1移植到2，需要代码本身是Angular2

该指令只是一个简单的自动聚焦指令，只要“li common auto focus”是一个属性，它就会聚焦元素

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));

bootstrap.js

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

HTML


测试

根据我对UpgradeAdapter代码的理解，您不能降级属性指令。当您降级组件时，构造的指令

restrict:'E'，

另一种方法是升级指令，请参阅有关升级指令的升级指南。

另一种选择是将同一指令的两个版本（NG1和NG2）并排，直到您升级了NG1版本的所有使用者

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

<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>