angularjs - 升级适配器是否支持ngModel？

Question

我正在考虑使用 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 1 应用程序中，我通过以下方式使用它:

<my-textbox ng-model="textboxValue">

但是当我升级时myTextbox使用 upgradeAdapter.upgradeNg1Component('myTextbox') ，正如预期的那样，我得到一个 Error: Can not locate 'ngModel'

Answer 1

我一直试图自己解决这个问题，但答案并不简单。您可以在 https://github.com/angular/angular/issues/8314#issuecomment-229391970 跟进。 .

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

例如:

n1 指令:

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

需要注意的重要一点是 ng-model="model"

然后在你的 ng2 组件中你可以使用 banana [()]。但是我再次不确定它与表单控件一起工作的正确程度。如果您了解更多信息，请告诉我。