Пользовательская директива ng-Include без дочерней области — Ng-Messages не работают

Я написал директиву 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-шаблон, который содержит другой ввод.

ng-сообщения в первом входе работают нормально, но не в моем включении.

Любые идеи, пожалуйста?


javascript angularjs angularjs-directive angular-directive ng-messages
person Javier Ros    schedule 09.07.2015    source источник
comment
зачем вам lobInclude? С ng-include это будет работать.   -  person milanlempera    schedule 10.07.2015
comment
Мне нужно включить шаблон без создания дочерней области, реальный пример более сложный и требует доступа к содержимому шаблона извне и наоборот.   -  person Javier Ros    schedule 10.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

Проблема заключается в компиляции запрошенного шаблона:

$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));
});

Последовательность такова: создать элемент, скомпилировать и добавить/заменить элемент в DOM. Отладка angular.js Я вижу, что NgModelDirective взаимодействует с контроллером FormDirective для установки $ pristine, $ touch, ... NgModelDirective имеет форму «^?», которая требуется для связи с родительской формой. Ну, когда я компилирую элемент, у шаблона нет родительской формы, потому что он не включен в 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)
});

Спасибо

person Javier Ros    schedule 13.07.2015