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

除非您在链接函数中为transclude函数指定了不同的范围，否则已转换的内容将使用外部范围。请参阅＆＃34;提供您自己的转换范围＆＃34; here。请注意，一旦执行此操作，您可能无法再引用vm。

AngularJS多重移植

3 个答案: