Множественное включение в 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

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