Угловой 1.5. Как сделать включенный шаблон для привязки к области компонента

Я использую компонент формы с общими функциями проверки и сохранения. Входные данные передаются в форму в виде включенного шаблона, например:

<form-editor entity="vm.entity">
        <input ng-model="vm.dirtyEntity.name" required name="nameInput">
</form-editor>

Проблема в том, что ng-model создает поле dirtyEntity в родительской виртуальной машине вместо изменения компонентов. Определение контроллера компонентов как «formVm» не помогло.

Есть ли способ заставить включенный элемент ng-model изменить только область действия компонента?

Или взаимодействие между включенным шаблоном и контроллером компонента считается неправильным, и этого никогда не следует делать?


javascript components angularjs transclusion
person lexigren    schedule 13.09.2016    source источник
comment
Попробуйте вручную включить содержимое в правильную область.   -  person dfsq    schedule 13.09.2016
comment
Вы имеете в виду манипуляции с DOM с помощью $compile?   -  person lexigren    schedule 13.09.2016
comment
Нет, я имею в виду функцию $transclude. Я начал проверять эту идею, но таким образом валидация перестала работать, что не есть хорошо. plnkr.co/edit/j5xtGBJh2iPCK0H7aB51?p=preview   -  person dfsq    schedule 13.09.2016

Ответы (1)


arrow_upward
1
arrow_downward

Основываясь на plunkr dfsq, вот решение вашей проблемы:

В своем компоненте вы программно копируете элементы, предназначенные для включения, и добавляете их в контроллер формы.

Вы можете программно включить с помощью службы $transclude и добавить элементы в форму следующим образом:

$transclude($scope, function(clone) {
  $element.find('form').append(clone);
})

Затем вы добавляете элементы в контроллер формы следующим образом:

$scope.testForm.$addControl($element);

В этом случае вам нужно обернуть его тайм-аутом, иначе angular создаст экземпляр вашего контроллера, и ваш код будет запущен, однако контроллер формы еще не создан.

Вот полный фрагмент, и вы можете найти plunkr здесь

controller($scope, $element, $transclude, $timeout) {
  // use a timeout to break javascript flow to allow a DOM update
  $timeout(function() {
    $transclude($scope, function(clone) {
      $element.find('form').append(clone);

      // take the form and add the elements to it
      $scope.testForm.$addControl($element);
    })
  })
}

Однако имейте в виду, что вам может понадобиться проверить элементы, которые не являются входными данными. Я не уверен, насколько надежно контроллер формы реагирует на изображение, добавленное в качестве элемента управления.

person PerfectPixel    schedule 13.09.2016