如何在没有双向绑定的情况下将ngModel传递给AngularJS组件

How to pass ngModel to AngularJS component without 2-way binding?

本文关键字：ngModel 组件 AngularJS 情况下 绑定      更新时间：2023-09-26

我把自定义输入作为单向数据绑定的AngularJS 1.5组件，把ngModel作为双向数据绑定:

return {
     bindings: {
       form: "<",
       fieldName: "@",
       minLength: "@",
       maxLength: "@",
       isRequired: "@",
       errors: "<", 
       value: "=ngModel"
     },
     templateUrl: "actTextField.html",
     controller: ActTextFieldController,
   }

在文件actTextField.js中提供Plunk。我想遵循一个新的Angular 1。x ES2015风格指南，通往Angular 2的路径，Todd写了:

我们不应该再通过'='语法使用双向数据绑定

使用单向数据绑定'<'和函数'&'

因此，ngModel的双向数据绑定可能不是一个好的选择，它应该是单向的。另一方面，我想保持组件尽可能简单-没有，例如，on-change回调。它应该在ngModel指令下接近原生input。是否有可能将ngModel传递给没有双向数据绑定的组件，同时能够从组件更改其值，以避免(例如)额外的回调?

如果你打算使用angular组件，请尝试明智地使用单向绑定。在视图模型中托管模型的上层父级应该是唯一能够修改模型的。如果你想让子组件修改模型，你需要这样传递一个函数:

bindings: {
   updateUsername : '&', // Function
   user : '<'            // Model
}

他们这样做是为了简化angular概念，并使用指令减少页面上的事件数量。

相关文章：