I've created a directive which wraps jstree and I used ng-model
inside my custom directive tag to pass some json data.
My question is : Do I have to use ng-model
in this case ?
I've created a directive which wraps jstree and I used ng-model
inside my custom directive tag to pass some json data.
My question is : Do I have to use ng-model
in this case ?
I've created a directive which wraps jstree and I used
ng-model
inside my custom directive tag to pass some json data. Do I have to useng-model
in this case ?
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() {}
})
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
functionality to a component1When 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);
};
}
})
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>
For more information, see
ngModel
)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>