如何在自定义指令中正确使用ng-model指令及其控制器? [英] How to Properly use the ng-model Directive and its Controller in Custom Directives?
问题描述
我创建了一个包装 jstree 的指令，并且在自定义指令标记中使用了ng-model传递一些json数据.
I've created a directive which wraps jstree and I used ng-model inside my custom directive tag to pass some json data.
我的问题是:在这种情况下是否必须使用ng-model?
My question is : Do I have to use ng-model in this case ?
推荐答案
我创建了一个包装 jstree 的指令，并且在自定义指令标签中使用了
ng-model传递一些json数据.在这种情况下是否必须使用ng-model?
I've created a directive which wraps jstree and I used
ng-modelinside my custom directive tag to pass some json data. Do I have to useng-modelin this case ?
ng-model指令实例化表单验证，并且是 ng-change指令.除非按预期方式使用，否则避免使用ng-model作为属性名称.有关更多信息，请参见 AngularJS开发人员指南-实现自定义表单控件(使用ngModel)
The ng-model directive instantiates the ngModelController. It is a complex directive that enables form validation and is the prerequisite for the ng-change directive. Avoid using ng-model as an attribute name unless it is used as intended. For more information, see AngularJS Developer Guide - Implementing custom form controls (using ngModel)
对于数据输入，只需使用单向<绑定:
For data inputs, simply use one-way < binding:
<my-tree tree-data="vm.treeData">
</my-tree>
app.component("myTree", {
bindings: { treeData: '<' }
template: `<div>my-tree component</div>`,
controller: function() {}
})
单向<绑定具有从v1.5开始可用.只有拥有数据的组件才可以对其进行修改，以使人们可以轻松地推断出哪些数据已更改以及何时更改.
One-way < binding has been available since v1.5. Only the component that owns the data should modify it, to make it easy to reason about what data is changed, and when.
实施ng-model时，使用单向
When implementing ng-model, use one-way < binding for input and use the ngModelController API for output:
app.component("checkboxComponent", {
bindings: { ngModel: '<' },
require: { ngModelCtrl: 'ngModel' },
template: `
<input type=checkbox ng-model='$ctrl.ngModel'
ng-change="$ctrl.ngModelChange()" />
`,
controller: function() {
this.ngModelChange = () => {
this.ngModelCtrl.$setViewValue(this.ngModel);
};
}
})
该组件对输入使用单向绑定，对输出使用$setViewValue.
通过这种方法，ng-change可以工作，并且该组件可以用作表单元素:
The component uses one-way binding for input, and $setViewValue for output.
With this method, the ng-change works, and the component can be used as a form element:
<form name="form1">
<checkbox-component name="input1" ng-model="vm.formData.input1"
ng-change="vm.inp1Change()">
</checkbox-component>
</form>
有关更多信息，请参见
angular.module("app",[])
.component("checkboxComponent", {
bindings: { ngModel: '<' },
require: { ngModelCtrl: 'ngModel' },
template: `
<fieldset>
<h3>Checkbox Component</h3>
<input type=checkbox ng-model='$ctrl.ngModel'
ng-change="$ctrl.ngModelChange()" />
Checkbox
</fieldset>
`,
controller: function() {
this.ngModelChange = () => {
this.ngModelCtrl.$setViewValue(this.ngModel);
};
}
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<checkbox-component ng-model="value"
ng-change="value2=value">
</checkbox-component>
<fieldset>
<p>value = {{value}}</p>
<p>value2 = {{value2}}</p>
</fieldset>
</body>
这篇关于如何在自定义指令中正确使用ng-model指令及其控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
