具有ng-模型的Angular 1.5组件

Mou*_*ssa 25 javascript angularjs

是否可以将ng-model与组件一起使用?我想将范围变量绑定到具有ng-model的组件.我抨击了我的问题.我希望将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>
Run Code Online (Sandbox Code Playgroud)

jcu*_*bic 36

您可以使用此代码:

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'
};
Run Code Online (Sandbox Code Playgroud)

  • 不要在这里使用$ watch,请使用此.$ onChanges请参阅https://docs.angularjs.org/guide/component和https://toddmotto.com/angular-1-5-lifecycle-hooks#onchanges作为示例. (9认同)
  • @ries是不是$ onChanges在绑定变更时触发?这个例子没有绑定. (7认同)
  • 我认为这是一个更好的解决方案,因为它实际上使用ngModel.NgModel对于某些用例(例如表单验证)是必需的. (3认同)
  • 这对我很有帮助:http://luxiyalu.com/angular-requiring-ng-model-as-component/ (2认同)

mas*_*tko 11

我已经为你修好了那个傻瓜.

您的参数名称必须与组件中的名称相对应.您应该在组件中使用camelCased名称,并在模板中使用kebab.例:

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

 <my-input my-placeholder="Enter first name" my-model="userData.firstName">
Run Code Online (Sandbox Code Playgroud)

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

  • 误解答案.您在这里看到的不是ngModel的用法,而是绑定到具有相同名称的属性.这使得验证不起作用,并且正在使用不应在组件中使用的双向绑定. (6认同)
  • 免责声明:由于此答案未使用ngModel,因此表单验证将无效 (5认同)