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

时间:2016-08-15 10:27:22

标签: javascript angularjs angularjs-controller angular-ngmodel angularjs-components

我有Wikipedia单向数据绑定和ngModel作为双向数据绑定:

return {
     bindings: {
       form: "<",
       fieldName: "@",
       minLength: "@",
       maxLength: "@",
       isRequired: "@",
       errors: "<", 
       value: "=ngModel"
     },
     templateUrl: "actTextField.html",
     controller: ActTextFieldController,
   }
提供的Plunk中的文件actTextField.js中的

。我想跟随托德写道的custom input as AngularJS 1.5 component

  

我们不再应该通过&#39; =&#39;来利用双向数据绑定绑定语法

     

使用单向数据绑定&#39;&lt;&#39;和功能&#39;&amp;&#39;

因此,ngModel的双向数据绑定可能不是一个好的选择,它应该是单向的。另一方面,我希望尽可能简化组件 - 例如,on-change回调。它应该使用input指令接近原生ngModel。是否可以在没有双向数据绑定的情况下将ngModel传递给组件,同时能够从组件中更改其值,以避免(例如)额外的回调?提前感谢您的每一个答案。

1 个答案:

答案 0 :(得分:3)

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

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

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