Почему форма undefined внутри ng-include при проверке $pristine или $setDirty()?

Ответ 1

Чтобы понять, почему решение с formHolder работает, вы должны сначала понять цепочку прототипов JavaScript. Давайте проиллюстрируем первый случай без formHolder в следующем псевдокоде:

$parentScope = {
  //I'm a parent scope inside Ctrl2
  productForm:{} //to avoid undefined reference error 
}

$childScope = {
  //I'm a child scope created by by ng-include 
  __protototype__: $parentScope 
}

При анализе директивы form создается FormController, которая устанавливается в свойстве $scope под ключом, указанным в значении атрибута name. Это в значительной степени эквивалентно:

$childScope.productForm = $formCtrl;

После чего 2 области будут выглядеть так:

$parentScope = {
  //I'm a parent scope inside Ctrl2
  productForm:{} //to avoid undefined reference error 
}

$childScope = {
  //I'm a child scope created by by ng-include 
  productForm: $formCtrl

  __protototype__: $parentScope 
}

Итак, вы на самом деле оказались с 2 свойствами в разных областях, удерживая разные объекты. Теперь во втором случае у вас есть следующая ситуация:

$parentScope = {
  //I'm a parent scope inside Ctrl2
  formHolder:{} //to avoid undefined reference error 
}

$childScope = {
  //I'm a child scope created by by ng-include 
  __protototype__: $parentScope 
}

Когда директива form устанавливает FormController экземпляр FormController на $scope, на этот раз он использует другую цепочку свойств:

$childScope.formHolder.productForm = $formCtrl;

Что эквивалентно написанию:

var formHolder = $childScope.formHolder; //since formHolder isn't defined on $childScope
//the JS runtime will look for it in the prototypes chain and find it inside $parentScope
//so here formHolder is the very same object you created and set on $parentScope
formHolder.productForm = $formCtrl;

Надеюсь, что это поможет понять, почему работает второй вариант. Что касается второй части вашего вопроса - ваше решение прост и прекрасно жизнеспособно, но есть несколько других способов обработки, которые лучше всего зависят от контекста использования:

• с использованием директивы без детальной области для извлечения общей разметки и частей функциональности
• с помощью директивы с дочерней областью, которая связывает изменения состояния либо через доступ к свойствам прямой родительской области, либо через выпущенные события
• с помощью настраиваемой директивы include, которая не создавала бы дочернюю область

Ответ 2

Просто определите переменную (пустой объект) в контроллере и используйте ее при определении формы. Поскольку angular JS использует прототипы прототипов под капотом, когда форма попытается получить доступ к внутренней области (для начальной загрузки переменной), она сначала будет проходить через цепочку видимости и попытаться найти ту же переменную в родительской области.

<!—- The vars should live in the controller. I placed them here for the example. -—>
<div ng-controller="controllerName" ng-init="form={}; model={}" >
    <div ng-include=" ‘path-to-the-template’ "></div>
</div>

<!—- Inside path-to-the-template -—>
<form name="form.createUser">
    <input name="name" ng-model="model.name" />
    <input name="email" ng-model="model.email" />
</form>

Ссылка для справки http://blog.152.org/2014/07/angular-form-element-not-attaching-to.html

Ответ 3

Я знаю, что это старый вопрос, но у меня была аналогичная проблема, и я изменил html и включил мой ng-контроллер в html файл.

Итак, вместо

<ng-include ng-controller="Ctrl2" src="'myForm.html'"></ng-include>

Измените его тоже

<ng-include="'myForm.html'"></ng-include>

И затем в файле myForm.html оберните код в div и добавьте атрибут ng-controller, чтобы ваш myForm.html стал

<div ng-controller="Ctrl2">
    <form name="productForm" novalidate>
      <h2>myForm</h2>
      description: <input type="text" name="description" ng-model="product.description"/>
      <br>
      <button ng-click="checkForm()">Check Form</button>
      <br>
      Form Pristine: {{output}}
      <br><br>
      I can see the description: {{descriptionTest}}
    </form>
</div>

Теперь ваш дочерний контроллер находится в области ng-include