Передача ngModel в компонент AngularJS

Question

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

Error: [$injector:unpr] Unknown provider: $ngModelProvider <- $ngModel 

Я также видел this и попытался это:

bindings: { 
    value: "=ngModel" 
} 

Я попробовал это, и затем установить значение в контроллере для два способа связывания, но это Безразлично Кажется, он работает.

Answer 1

Это распространенное недоразумение с компонентами в угловом. Компоненты не должны изменять данные вне своей области. Итак, если вы хотите это сделать, вам действительно следует использовать Директиву.

Вот цитата из documentation:

Components only control their own View and Data: Components should never modify any data or DOM that is out of their own scope. Normally, in Angular it is possible to modify data anywhere in the application through scope inheritance and watches. This is practical, but can also lead to problems when it is not clear which part of the application is responsible for modifying the data. That is why component directives use an isolate scope, so a whole class of scope manipulation is not possible.

Answer 2

Я думаю, что угловой рекомендуемый способ делать обратные вызовы (например, ngclick, например), чтобы использовать метод связывания типа: &

Вот пример plunkr: https://plnkr.co/edit/nySL4OoMpJPkGXX8j78U?p=preview

Примечание. Эта часть определяет тип привязки метода, а функция internalChange выполняет w Любое угловое выражение предоставляется родителем/вызывающим.

bindings: { 
     valueChanged: '&?' 
    }, 
    controller: function() { 
     this.$onInit = function() { 
      this.value = 'initial value'; 
     }; 
     this.internalChange = function() { 
      if (this.valueChanged) { 
       this.valueChanged({ $value: this.value}); 
      } 
     }; 
    } 

А вот здесь два способа использования выражений, обратите внимание на значение $, определенное компонентом.

<my-comp data-value-changed="$ctrl.someFunction($value)"></my-comp> <br 
<my-comp data-value-changed="$ctrl.someProperty = 'Bla: ' + $value"></my-comp> 

Я попытался установить его, чтобы показать множество вещей.

1. Связывание метода принимает угловое выражение. У меня есть 2 примера, один из которых вызывает функцию на родительском контроллере, а другая - свойство

2. Это выражение выполняется с областью родительского/вызывающего (то есть: имеет доступ к свойствам родительского контроллера, функциям и т. Д.). .)

3. компонент является тот, кто вызывает его, выполнив имя связывания как функции

4. компонент может предоставить карту ключ/значение, где ключ является именем свойства, которые могут быть использованы (значение $ в моем примере)

Это хорошее решение, если вы в порядке, когда компонент выполняет «push» обновления родительскому. Если, например, вы только хотели получить данные от компонента в определенное время (возможно, из-за ограничений времени или памяти), то для этой проблемы существует много других решений.

Надеюсь, это поможет!