Question

是否可以将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>

Answer 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'
};

Answer 2

我为你修好了plunker。

参数名称必须与组件中的名称相对应。您应该在组件中使用camelCased名称，并在模板中使用kebab。例如：

tbody

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

具有ng-模型的Angular 1.5组件

2 个答案: