如何在没有双向绑定的情况下将 ngModel 传递给 AngularJS 组件?
How to pass ngModel to AngularJS component without 2-way binding?
我有 custom input as AngularJS 1.5 component 单向数据绑定和 ngModel 作为双向数据绑定:
return {
bindings: {
form: "<",
fieldName: "@",
minLength: "@",
maxLength: "@",
isRequired: "@",
errors: "<",
value: "=ngModel"
},
templateUrl: "actTextField.html",
controller: ActTextFieldController,
}
在文件 actTextField.js
中提供的 Plunk。我想关注 A new Angular 1.x ES2015 styleguide, the path to Angular 2 Todd 写道:
We no longer should utilise two-way data-binding through '=' syntax for bindings
Use one-way databinding '<' and functions '&'
因此,ngModel
的 2 向数据绑定可能不是一个好的选择,它应该是 1 向。另一方面,我想让组件尽可能简单——没有,例如,on-change
回调。它应该接近原生 input
和 ngModel
指令。是否可以在没有双向数据绑定的情况下将 ngModel
传递给组件,同时能够从组件更改其值,以避免(例如)额外的回调?预先感谢您的每一个回答。
如果您打算使用 angular 组件,请尝试明智地使用一种绑定方式。在他的视图模型中托管模型的上层父级应该是唯一能够修改它的父级。如果你想让子组件修改模型,你需要这样传递一个函数:
bindings: {
updateUsername : '&', // Function
user : '<' // Model
}
他们这样做是为了简化 angular 概念并使用指令减少页面上的事件数量。
我有 custom input as AngularJS 1.5 component 单向数据绑定和 ngModel 作为双向数据绑定:
return {
bindings: {
form: "<",
fieldName: "@",
minLength: "@",
maxLength: "@",
isRequired: "@",
errors: "<",
value: "=ngModel"
},
templateUrl: "actTextField.html",
controller: ActTextFieldController,
}
在文件 actTextField.js
中提供的 Plunk。我想关注 A new Angular 1.x ES2015 styleguide, the path to Angular 2 Todd 写道:
We no longer should utilise two-way data-binding through '=' syntax for bindings
Use one-way databinding '<' and functions '&'
因此,ngModel
的 2 向数据绑定可能不是一个好的选择,它应该是 1 向。另一方面,我想让组件尽可能简单——没有,例如,on-change
回调。它应该接近原生 input
和 ngModel
指令。是否可以在没有双向数据绑定的情况下将 ngModel
传递给组件,同时能够从组件更改其值,以避免(例如)额外的回调?预先感谢您的每一个回答。
如果您打算使用 angular 组件,请尝试明智地使用一种绑定方式。在他的视图模型中托管模型的上层父级应该是唯一能够修改它的父级。如果你想让子组件修改模型,你需要这样传递一个函数:
bindings: {
updateUsername : '&', // Function
user : '<' // Model
}
他们这样做是为了简化 angular 概念并使用指令减少页面上的事件数量。