如何在自定义指令中正确使用 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 指令 实例化 ngModelController.这是一个复杂的指令，可以启用表单验证，并且是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() {}
})
单向<binding 从 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 时，使用 单向 < 绑定 用于输入并使用 ngModelController API 用于输出:
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屋！
