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

发布时间：2020-12-17 07:14:42 所属栏目：安全来源：网络整理

导读：我正在研究使用Angular 2的UpgradeAdapter来转换我的库.我的许多指令都使用ngModel与消费者进行通信,但我没有在文档或代码中看到任何支持升级此类组件的内容. 有没有办法升级使用ngModel的Angular 1指令？例如,我有一个指令： module.directive('myTextbox'

我正在研究使用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);
      });
    }
  };
});

在我的角度1应用程序中我通过执行以下操作：

< my-textbox ng-model =“textboxValue”>

但是当我使用upgradeAdapter.upgradeNg1Component(‘myTextbox’)升级myTextbox时,正如预期的那样我得到一个错误：找不到’ngModel’

解决方法

我一直试图自己解决这个问题,答案并不简单.您可以在 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': '=','settings': '=?'
            },'template': '<checkboxes ng-model="model" name="name" options="options" settings="settings"></checkboxes>','controller': function ($scope) {
          }};});

UpgradeAdapter.upgradeNg1Component('checkboxesWrapper')

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

然后在ng2组件中,您可以使用banana [()].但同样我不确定它将如何正确使用表单控件.如果你想出更多,请告诉我.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!