AngularJS Multiple Transclusion

Question

I have an AngularJS directive with multiple transclusions and one transclusion slot is wrapped by a form.

Everything is working fine except for the form validation messages.

The directive template:

<ng-form name="nbcardform" ng-submit="submit()" novalidate>
    <ng-transclude ng-transclude-slot="back"></ng-transclude>
    <div class="row">
        <div class="col-xs-12">
            <button type="submit">Save</button>
        </div>
    </div>
</ng-form>

Here is an example of the directive usage:

<nb-card>
    <nb-card-back>
        <input type="text" name="username" ng-model="vm.username" required>
        <div ng-messages="nbcardform.username.$error" role="alert">
            <div ng-message="required">Required field</div>
        </div>
    </nb-card-back>
<nb-card>

For some reason the expression nbcardform.username.$error is undefined.

Can someone help me with this?

is nbcardform.username.$error undefined or nbcardform.username? — Austin
– Austin, Commented Apr 19, 2016 at 16:12

Mathew Berg · Accepted Answer · 2016-04-19 16:14:39Z

You should be creating a subform in your directive as it's scope is (likely?) different and it has no idea what nbcardform is.

<nb-card ng-form="myDirectiveForm">
    <nb-card-back>
        <input type="text" name="username" ng-model="vm.username" required>
        <div ng-messages="myDirectiveForm.username.$error" role="alert">
            <div ng-message="required">Required field</div>
        </div>
    </nb-card-back>
<nb-card>

This will still wire in nicely and in the parent directive you could use something like this:

<ng-form name="nbcardform" ng-submit="submit()" novalidate>
    <ng-transclude ng-transclude-slot="back"></ng-transclude>
    <div class="row">
        <div class="col-xs-12">
            <button type="submit">Save</button>
        </div>
    </div>
    {{ nbcardform.$valid }}
    {{ nbcardform.myDirectiveForm.$valid }}
    {{ nbcardform.myDirectiveForm.username.$valid }}
</ng-form>

Jeffrey Coleman · Accepted Answer · 2016-04-19 16:15:25Z

0

Have you tried:

<div ng-messages="vm.username.$error" role="alert">

answered Apr 19, 2016 at 16:15

Jeffrey Coleman

1888 bronze badges

Comments

Amy Blankenship · Accepted Answer · 2016-04-19 17:35:14Z

0

The transcluded content uses the outer scope unless you specify a different scope to the transclude function in your linking function. See "Providing your own Transclusion Scope" here. Note that once you do that, you may no longer be able to reference vm.

answered Apr 19, 2016 at 17:35

Amy Blankenship

7,0613 gold badges27 silver badges51 bronze badges

Collectives™ on Stack Overflow

AngularJS Multiple Transclusion

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related