I am building a Lightning component for a community and we are being asked to use Bootstrap to stay consistent with the corporate style guide.
There is a modal form in the component, and I want to make use of some of the component attributes in defining the behavior of this form.
What I'm seeing is that when the modal is not open, the values on those attribute references are correct. I see this when inspecting the html of the modal body.
When the modal is open, though, those values do not all persist.
<div class="modal fade" id="modalVideoPlayer" aura:id="modal" tabindex="-1" role="dialog" aria-labelledby="modalVideoPlayerLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content shadow-depth-2">
<div class="modal-header">
<h3>
{!v.formHeaderText}
</h3>
</div>
<div class="modal-body" id="modalVideoPlayerLabel">
<div class="container-fluid">
{!v.body}
</div>
{!v.TextValueAssignedFromParentComponent}
{!v.BooleanValueSetInInit}
{!v.TextValueDeclaredInAttributeDefinition}
</div>
<div class="modal-footer">
<button type="button" onclick="{!c.closeModal}" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In the example above, the only value that seems to keep is {!v.TextValueDeclaredInAttributeDefinition}. Everything else is false or empty:
<h3 data-aura-rendered-by="235:2;a">
falseDeclaredAttributeText
</h3>
If I inspect the html in the modal prior to opening it:
<h3 data-aura-rendered-by="120:2;a">
ParentTextValueTrueDeclaredAttributeText
</h3>
What's going on here? It looks like the data is being generated again in the modal, and maybe doesn't have visibility to the existing attributes? Is this a function of how Bootstrap creates the modal?
What approach (while using the bootstrap modal style) would work around this?