带有 ng-model 的 Angular 1.5 组件答案

【问题标题】：Angular 1.5 component with ng-model带有 ng-model 的 Angular 1.5 组件
【发布时间】：2016-10-21 18:03:59
【问题描述】：

是否可以将 ng-model 与组件一起使用？我想将范围变量绑定到具有 ng-model 的组件。我有plunkered my issue。我希望将组件 my-input 绑定到范围 userData.name 中的变量。

我正在使用 Angular JS 1.5.6 组件，并希望避免使用指令。

<body ng-controller="MyCtrl">
  <div class="container">
    <h2>My form with component</h2>
    <form role="form">
      <div class="form-group">
        <label>First name</label>
        <my-input placeholder="Enter first name" ng-model="userData.name"></my-input>
      </div>
    </form>
  </div>
</body>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您可以使用此代码：

function myInputController($scope) {
    var self = this;
    this.$onInit = () => {
        this.ngModel.$render = () => {
            self.model = self.ngModel.$viewValue;
        };
        $scope.$watch(function() { return self.model; }, function(value) {
            self.ngModel.$setViewValue(value);
        });
    };
}
module.component('myInput', {
    require: {
        ngModel: '^ngModel'
    },
    template: '<input ng-model="vm.model"/>',
    controller: myInputController,
    controllerAs: 'vm'
};

【讨论】：

我认为这是一个更好的解决方案，因为它实际上使用了 ngModel。 NgModel 对于某些用例是必需的，例如表单验证。
不要在这里使用 $watch，使用 this.$onChanges 参见 docs.angularjs.org/guide/component 和 toddmotto.com/angular-1-5-lifecycle-hooks#onchanges 示例。
@ries 是不是 $onChanges 在绑定更改时触发？这个例子没有绑定。
这对我很有帮助：luxiyalu.com/angular-requiring-ng-model-as-component
@pilau 你需要为组件的 dom 设置属性：data-ng-model="your.model"

【解决方案2】：

我已经为你修复了plunker。

参数名称必须与组件中的名称相对应。您应该在组件中使用驼峰式命名，并在模板中使用 kebab-cased。示例：

  bindings: {
      myPlaceholder: '@',
      myModel:'='
    }

 <my-input my-placeholder="Enter first name" my-model="userData.firstName">

关于您关于使用 ng-model 的问题 - 您可以使用任何在组件中定义的参数。在这种情况下，您的参数名称应该是 ngModel。

【讨论】：

它工作得很好thanx了很多！我还有最后一个问题。请，当您有一个由按钮和输入组件组成的表单组件时，您如何绑定数据：请参阅这个新的plunk
免责声明：因为这个答案没有使用 ngModel，所以表单验证不起作用
误导性答案。您在这里看到的不是 ngModel 的用法，而是与同名属性的绑定。这使得验证不起作用，并且正在使用不应该在组件中使用的双向绑定。
许多人只需要工作，而不关心以正确的方式做事，这是一个完全有效的意见。总而言之，我对答案投了反对票，因为我认为 Stackoverflow 是一种知识来源，而不是“你的功课做得不好，只是复制/粘贴”。很抱歉我的愤怒:)