AngularJS 多重包含

Question

我有一个包含多个包含的 AngularJS 指令，一个包含槽由一个表单包装。

除表单验证消息外，一切正常。

指令模板：

<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>

这是 指令用法的示例:

<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>

由于某种原因，表达式 nbcardform.username.$error 未定义。

有人可以帮我解决这个问题吗？

Answer 1

您应该在您的指令中创建一个子表单，因为它的范围（可能？）不同并且它不知道 nbcardform 是什么。

<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>

这仍然可以很好地连接，在父指令中你可以使用这样的东西：

<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>

Answer 2

你试过了吗：

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

Answer 3

嵌入的内容使用外部作用域，除非您在链接函数中为嵌入函数指定了不同的作用域。参见 "Providing your own Transclusion Scope" here。请注意，一旦这样做，您可能无法再引用 vm。

AngularJS 多重包含

AngularJS Multiple Transclusion

directive

angularjs

angularjs-ng-transclude