问题

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 ?

回答1:

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 use ng-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.

How to add `ng-model` functionality to a component¹

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);
      };
    }
})

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

AngularJS ngModelController API Reference
AngularJS Developer Guide -Implementing custom form controls (using ngModel)

The DEMO

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>

来源：https://stackoverflow.com/questions/45617390/how-to-properly-use-the-ng-model-directive-and-its-controller-in-custom-directiv

标签

angularjs