Переменная не привязана к контроллеру AngularJS в компоненте внутри директивы scope: false - PullRequest
Новая
       5

Переменная не привязана к контроллеру AngularJS в компоненте внутри директивы scope: false

0 голосов
/ 28 октября 2018

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

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

Но даже несмотря на то, что я установил области действия этих директив в false, мои формы просто потеряли свои привязки к контроллеру проверки.

Я воспроизвел эту проблему в плункере https://plnkr.co/edit/kn9GEF3jhEhAkJGQAQny?p=preview

<!--<my-container>-->
<h1> Header Form</h1>
<header-form form="hForm" model="header"></header-form>
<!--</my-container>-->
<my-container>
<h1> Section Form </h1>
<section-form form="sForm" model="section"></section-form>
</my-container>

где вторая форма заключена в директиву

Есть какие-нибудь подсказки?Заранее спасибо

1 Ответ

0 голосов
/ 29 октября 2018

Это предполагаемое поведение по углу - transclude создает свою собственную область, тогда как hform и sform связаны с внешней областью.См. Связанный вопрос с дополнительной информацией здесь: Директива AngularJS transclude scope = false?

В ответ на вашу конкретную проблему, обходной путь должен связать формы с объектом, который затем делает егодоступны в рамках transclude.

<!--<my-container>-->
<h1> Header Form</h1>
<header-form form="obj.hForm" model="header"></header-form>
<!--</my-container>-->

<my-container>
  <h1> Section Form </h1>
  <section-form form="obj.sForm" model="section"></section-form>
</my-container>

HeaderForm <br/>
model: {{header | json}} <br/>
$valid: {{obj.hForm.$valid}}
<br/> <br/>
SectionForm <br/>
model: {{section | json}} <br/>
$valid: {{obj.sForm.$valid}}
<br/>

и в MainController: 

$scope.obj = {};

Вот плункер: https://plnkr.co/edit/NRHA03ucEwKmuMCkpXCq

...