如何将`ng-model`功能添加到组件¹

Question

我创建了一个包装jstree的指令，我在自定义指令标记中使用了ng-model来传递一些json数据。

我的问题是：在这种情况下我是否必须使用ng-model？

Answer 1

我创建了一个包装jstree的指令，我在自定义指令标记中使用了ng-model来传递一些json数据。在这种情况下我是否必须使用ng-model？

ng-model directive实例化ngModelController。它是一个复杂的指令，支持form validation，是ng-change directive的先决条件。除非按预期使用，否则请避免使用ng-model作为属性名称。有关详细信息，请参阅AngularJS Developer Guide - Implementing custom form controls (using ngModel)

对于数据输入，只需使用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已经可用。只有拥有数据的组件才应对其进行修改，以便于推断更改的数据以及何时更改。

如何将`ng-model`功能添加到组件¹

在实施ng-model时，请使用one-way < binding作为输入，并使用ngModelController API作为输出：

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可以工作，组件可以用作表单元素：

<form name="form1">
     <checkbox-component name="input1" ng-model="vm.formData.input1"
                         ng-change="vm.inp1Change()">
     </checkbox-component>
</form>

有关详细信息，请参阅

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>

如何在自定义指令中正确使用ng-model指令及其控制器？

1 个答案:

如何将`ng-model`功能添加到组件¹

The DEMO

如何在自定义指令中正确使用ng-model指令及其控制器？

1 个答案:

如何将ng-model功能添加到组件 1

The DEMO

如何将`ng-model`功能添加到组件¹