AngularJS множественное включение

Question

AngularJS множественное включение

0

У меня есть директива 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 не определено.

Может кто-то помочь мне с этим?

João Borges 19 апр. 2016, в 18:52

Источник

0

такое nbcardform.username. $ error undefined или nbcardform.username?
Austin 19 апр. 2016, в 16:12

Теги:

angularjs

directive

angularjs-ng-transclude

3 ответа

0

Заключенный контент использует внешнюю область действия, если вы не укажете другую функцию трансключения в вашей функции связывания. См. "Предоставление вашей собственной области трансклюзии" здесь. Обратите внимание, что как только вы это сделаете, вы больше не сможете ссылаться на vm.

Amy Blankenship 19 апр. 2016, в 16:16

0

Ты пробовал:

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

Jeffrey Coleman 19 апр. 2016, в 14:37

Ещё вопросы

такое nbcardform.username. $ error undefined или nbcardform.username?

Mathew Berg · Accepted Answer · 2016-04-19T15-08-00.000Z

Вы должны создать подчиненную форму в своей директиве, так как ее область (вероятно?) Отличается и не знает, что такое 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>