CODEWITHSUNDEEP
angularjsdirectiveangularjs-ng-transclude
João Borges
João Borges

Reputation: 13

AngularJS Multiple Transclusion

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?

Upvotes: 1

Views: 239

Answers (3)

Amy Blankenship
Amy Blankenship

Reputation: 6961

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.

Upvotes: 0

Jeffrey Coleman
Jeffrey Coleman

Reputation: 188

Have you tried:

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

Upvotes: 0

Mathew Berg
Mathew Berg

Reputation: 28750

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>

Upvotes: 1

Related Questions