如何在没有双向绑定的情况下将ngModel传递给AngularJS组件? [英] How to pass ngModel to AngularJS component without 2-way binding?

查看:167
本文介绍了如何在没有双向绑定的情况下将ngModel传递给AngularJS组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

自定义输入为AngularJS 1.5组件使用单向数据绑定和ngModel作为双向数据绑定:

I have custom input as AngularJS 1.5 component with one-way data bindings and ngModel as two-way data binding:

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

文件 actTextField中的

在提供的Plunk中.js 。我想关注一个新的Angular 1.x ES2015风格指南,通往Angular 2的路径,Todd写道:

in file actTextField.js in provided Plunk. I want to follow A new Angular 1.x ES2015 styleguide, the path to Angular 2 where Todd wrote:


我们不再应该利用通过'='语法进行绑定的双向数据绑定

We no longer should utilise two-way data-binding through '=' syntax for bindings

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

Use one-way databinding '<' and functions '&'

因此, ngModel 的双向数据绑定可能不是一个好选择,它应该是1-办法。另一方面,我希望保持组件尽可能简单 - 例如,没有 on-change 回调。它应该使用 ngModel 指令接近本机输入。是否可以将 ngModel 传递给没有双向数据绑定的组件,同时能够从组件中更改其值,以避免(例如)额外的回调?每个答案都要提前感谢。

So, 2-way data binding for ngModel may not be a good choice, it should be 1-way. On the other hand, I want to keep component as simple as possible - without, for example, on-change callback. It should act close to native input with ngModel directive. Is it possible to pass ngModel to component without 2-way data binding and at the same time be able to change its value from a component, to avoid (for example) additional callbacks? Thank you in advance for every answer.

推荐答案

如果您打算使用角度组件,请尝试明智地使用单向绑定。在他的viewmodel中托管模型的上层父级应该是唯一能够修改它的模型。如果你想让子组件修改模型,你需要以这种方式传递函数:

If you plan on using angular component, try use one way binding wisely. The upper parent hosting the model in his viewmodel should be the only one to be able to modify it. if you want the child component to modify the model, you need to pass along a function this way:

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

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

They did it this way to simplify angular concept and to reduce the number of events on the page using directives.

这篇关于如何在没有双向绑定的情况下将ngModel传递给AngularJS组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆