1

我有一个特定的问题，我需要在使用 angular 构建的表单中添加嵌套表单。

静态（非编程），我可以执行以下操作：

<form>
   ...
   <ng-form>
       <input ng-model="myModel" required>
   </ng-form>
   ...  
</form>

嵌套表单中的验证错误会使外部表单无效。这正是我需要的。

但我似乎无法通过指令以编程方式执行此操作。在模板中，我有以下内容

<div dynamic-nested-form="">

</div>

我有以下内容：

(function () {

angular
    .module('controls')
    .directive('dynamicNestedForm', dynamicNestedForm);

function dynamicNestedForm($compile) {
    return {
        restrict: 'A',

        link: linkedFunction
    };

    function linkedFunction($scope, element) {

        var nestedForm = angular.element('<ng-form><input ng-model="myModel" required></ng-form>');
        element.append($compile(nestedForm)($scope));
   }
})();

表单确实被注入 DOM 并且处于无效状态，在 Chrome 元素视图中，我看到了

<div dynamic-nested-form="" class="ng-scope">

    <ng-form 
        class="ng-pristine ng-scope ng-invalid ng-invalid-required">      
        <input ng-model="myModel" required="" 
               class="ng-pristine ng-untouched ng-invalid ng-invalid-required">
    </ng-form>
</div>

但外部形式不会失效。加载外部表单时看不到内部表单吗？

我究竟做错了什么？

4

1 回答 1

2

对，所以，基本上通过 Angular 做了一点调试，只是碰巧嵌套表单找不到外部表单控制器。ngModelDirective（在其中需要外部表单控制器preLink）

它找不到它的原因是因为这preLink发生在编译期间（显然，它是 a preLink）并且我的编译是在附加嵌套表单之前完成的。

因此，作为一种解决方案，我不是在附加之前进行编译，而是在之后进行，例如

var nestedForm  = angular.element('<ng-form><input ng-model="myModel" required></ng-form>');
$compile(element.append(nestedForm ).contents())($scope);

好吧，我想我正在重新编译它。

Anyhoo，这会使内部控件找到外部形式，我的问题就解决了。

于 2015-06-17T11:35:08.310 回答