Angularjs 升级适配器是否支持ngModel？

我正在考虑使用Angular 2的UpgradeAdapter来转换我的库。我的许多指令都使用ngModel与消费者进行通信，但我在文档或代码中没有看到任何支持升级此类组件的内容

有没有办法升级使用ngModel的Angular 1指令

例如，我有一个指令：

module.directive('myTextbox', function() {
  return {
    template: '<input type="text"></input>',
    scope: {},
    bindToController: true,
    controllerAs: 'ctrl',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      ngModel.$render = function() {
        elem.find('input').val(ngModel.$viewValue);
      }

      elem.find('input').on('change', function(e) {
        ngModel.$setViewValue(e.target.value);
      });
    }
  };
});

 angular.module('components')
  .directive('checkboxes', function () {
      return {
        'require': 'ngModel',
        'restrict': 'E',
        'scope': {
          'model': '=ngModel',
          'name': '=?',
          'options': '=',
          'settings': '=?'
        },
        'templateUrl': 'app/components/forms/checkboxes/checkboxes.html',
        'controller': function ($scope) {
      }};});

module.directive（'myTextbox'，function（）{
返回{
模板：“”，
作用域：{}，
bindToController：对，
controllerAs:'ctrl'，
要求：'ngModel'，
链接：功能（范围、要素、属性、ngModel）{
ngModel.$render=function（）{
元素find（'input'）.val（ngModel.$viewValue）；
}
元素查找（'input'）。关于（'change'，函数（e）{
ngModel.$setViewValue（即目标值）；
});
}
};
});

在我的angular 1应用程序中，我通过以下方式使用它：

---

然而，当我使用

upgradeAdapter.upgradeNg1Component（'myTextbox'）

升级

myTextbox

时，正如预期的那样，我得到了一个

错误：找不到“ngModel”

，我自己一直在尝试解决这个问题，答案并不简单。您可以在以下位置进行跟进

一种解决方法是在ng1组件上创建ng1包装，然后对包装进行升级。这个包装器不会使用ngModel，它只是简单地将所有参数传递给原始ng1指令，而不做其他事情

例如：

n1指令：

module.directive('myTextbox', function() {
  return {
    template: '<input type="text"></input>',
    scope: {},
    bindToController: true,
    controllerAs: 'ctrl',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      ngModel.$render = function() {
        elem.find('input').val(ngModel.$viewValue);
      }

      elem.find('input').on('change', function(e) {
        ngModel.$setViewValue(e.target.value);
      });
    }
  };
});

 angular.module('components')
  .directive('checkboxes', function () {
      return {
        'require': 'ngModel',
        'restrict': 'E',
        'scope': {
          'model': '=ngModel',
          'name': '=?',
          'options': '=',
          'settings': '=?'
        },
        'templateUrl': 'app/components/forms/checkboxes/checkboxes.html',
        'controller': function ($scope) {
      }};});

还有包装纸：

  angular.module('components')
      .directive('checkboxesWrapper', function () {
          return {
            'restrict': 'E',
            'scope': {
              'model': '=',
              'name': '=?',
              'options': '=',
              'settings': '=?'
            },
            'template': '<checkboxes ng-model="model" name="name" options="options" settings="settings"></checkboxes>',
            'controller': function ($scope) {
          }};});

UpgradeAdapter.upgradeNg1Component('checkboxesWrapper')

angular.module（'components'））
.directive（'checkboxesWrapper'，function（）{
返回{
“限制”：“E”，
“范围”：{
“模型”：“=”，
“名称”：“=？”，
“选项”：“=”，
“设置”：“=？”
},
“模板”：“，
“控制器”：函数（$scope）{
}};});
UpgradeAdapter.upgradeNg1Component（'checkboxesWrapper'））

需要注意的重要事项是ng model=“model”

---

然后在ng2组件中，您可以使用香蕉。但我也不确定它与表单控件的配合是否正确。如果你想了解更多，请告诉我。

这里有两个不同的问题。首先，UpgradeAdapter同时运行v1.X和v2。所以，是的，它支持在任何一个版本中运行的任何东西。它实际上并没有为你升级任何东西。至于升级指令，看起来您只需要将其转换为组件指令。马修格林：我理解所有这些，但我的问题是关于ngModel的。在Angular 1中，ngModel是一个属性指令，它似乎不可升级。但由于ngModel是这样一个核心指令，我希望在升级指令时能得到支持。这与上面的问题不同。如果你用更多的信息更新你的问题，你可能会得到更好的帮助。也许是一个例子，你有什么，你是如何试图升级它。为了说明它的价值，我想我需要更好地解释一下，我正在尝试使用UpgradeAdapter来升级使用angular 1 ngModel的angular 1指令。你的链接是angular 2的ngModel，它与我的问题没有任何关系。