Angular 1.5 компонент с ng-моделью

Можно ли использовать ng-модель с компонентом? Я хотел бы привязать переменную области видимости к компоненту с 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>

Ответ 1

Я исправил plunker для вас.

Имена ваших параметров должны соответствовать именам вашего компонента. Вы должны использовать имена camelCased в своем компоненте и шашлыке в ваших шаблонах. Пример:

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

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

Что касается вашего вопроса об использовании ng-model - вы можете использовать любой параметр, насколько вы его определяете в своем компоненте. В этом случае имя вашего параметра должно быть ngModel.

Ответ 2

Вы можете использовать этот код:

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