没有子范围的自定义 ng-Include 指令 - Ng-Messages 不起作用

Question

我写了一个名为 lobInclude 的指令，我想要与 ngInclude 相同但没有作用域：

.directive("lobInclude", ["$templateRequest", "$compile", function($templateRequest, $compile)  {
        return {
            restrict: "A", 
            scope: false,
            compile: function()  {
                return {
                    pre: function(scope, elem, attrs) {
                        var toObserve = "lobInclude";
                        attrs.$observe(toObserve, function(value) {
                            value = scope.$eval(value);
                            $templateRequest(value, true).then(function(response) {
                                if (angular.isDefined(attrs.replace))
                                    elem.replaceWith($compile(angular.element(response))(scope));
                                else
                                    elem.append($compile(angular.element(response))(scope));
                            });
                        });
                    },
                    post: function() { }
                };
            }
        }
    }]);

一切看起来都很好，但是当使用我的指令时 ng-Messages 不能正常工作，你可以在这里看到一个例子：http://codepen.io/jros/pen/jPxmxj?editors=101

在代码笔中，我有一个带有输入的表单和我的指令，其中包含一个包含其他输入的脚本 ng-template。

第一个输入中的 ng-messages 工作正常但在我的 include 中没有。

有什么想法吗？

Answer 1

问题是关于所请求模板的编译：

$templateRequest(value, true).then(function(response) {
    if (angular.isDefined(attrs.replace))
        elem.replaceWith($compile(angular.element(response))(scope));
    else
        elem.append($compile(angular.element(response))(scope));
});

顺序是：创建一个元素，编译 add/replace DOM 中的元素。调试 angular.js 我可以看到 NgModelDirective 与 FormDirective 控制器进行通信以设置 $pristine、$touch、... NgModelDirective 具有与父表单通信所需的“^?form”。好吧，当我编译元素时，模板没有父表单，因为它不包含在 DOM 中。 ngModel 找不到祖先形式，无法设置 $error, $pristine, $touch, ...

解决方案是向 DOM 添加元素，然后编译它：

$templateRequest(value, true).then(function(response) {
    var responseElem = angular.element(response);
    if (angular.isDefined(attrs.replace))
        elem.replaceWith(responseElem);
    else
        elem.append(responseElem);
    $compile(responseElem)(scope)
});

谢谢

没有子范围的自定义 ng-Include 指令 - Ng-Messages 不起作用

Custom ng-Include directive without child scope - Ng-Messages not work

javascript

angularjs

angularjs-directive

angular-directive

ng-messages