升級適配器是否支持ngModel？

我正在研究使用Angular 2的UpgradeAdapter來轉換我的庫。我的許多指令都使用ngModel與消費者進行通信，但在文檔或代碼中沒有看到支持升級此類組件的任何內容。升級適配器是否支持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，預期我得到一個Error: Can not locate 'ngModel'

來源

2016-04-27 fenduru

你真的有兩個不同的問題在這裏。首先，UpgradeAdapter同時運行v1.X和v2。所以是的，它支持任何版本的任何運行。它實際上並沒有爲你升級任何東西。至於升級一個指令，看起來你只需要將它轉換成一個組件指令。但是這是你要做的。 –

@MthethewGreen我明白所有這些，但是我的問題是關於ngModel的。在Angular 1中ngModel是一個屬性指令，它看起來不可升級。但是，由於ngModel是這樣一個核心指令，我希望在升級指令時支持它。 – fenduru

那看起來不像上面那樣的問題。如果你用更多的信息更新你的問題，你可能會更好地幫助你。也許是你有什麼樣的例子，以及你如何嘗試升級它。對於它的價值，[我沒有看到ngModel無法使用]（https://angular.io/docs/ts/latest/api/common/NgModel-directive.html）。 –

我一直試圖弄清楚自己和回答r不直截了當。你可以在https://github.com/angular/angular/issues/8314#issuecomment-229391970處跟進。

解決辦法之一是通過ng1組件創建一個ng1包裝，然後升級包裝器。這個包裝器不會使用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-模型= 「模式」

然後在你的ng2組件中，你可以使用香蕉 [（）]。但是，我不確定它將如何正確使用窗體控件。讓我知道你是否瞭解更多。

來源

2016-07-10 06:51:18 jin

升級適配器是否支持ngModel？

回答

相關問題