Variable not binding to AngularJS Controller when in a component inside a "scope:false" directive

Question

I'm working on a SPA that has some huge forms that I decided to put inside custom components and just bind all forms to a controller that checks their validity and do some extra stuff before sending them to a server.

The forms are also inside containers that have a ton of classes from my company's web design front-end and some behaviour in JS, so I thought it'd make things cleaner to put these containers in directives and control their behaviours there.

But even thought I set these directives' scopes to false, my forms just lost their bindings to the validation controller.

I reproduced this issue in a plunker 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>

where the second form is wrapped by the directive

Any hints? Thanks in advance

james00794 · Accepted Answer · 2018-10-29 15:48:15Z

This is intended behaviour by angular - transclude creates it's own scope, while hform and sform are bound to the outer scope. See a related question with more information here: AngularJS directive transclude scope=false?

In response to your particular issue, the workaround is to bind the forms to an object, which then makes it available within the 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/>

and in MainController:

$scope.obj = {};

Here is a plunker: https://plnkr.co/edit/NRHA03ucEwKmuMCkpXCq

Collectives™ on Stack Overflow

Variable not binding to AngularJS Controller when in a component inside a "scope:false" directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related