В функции transclude функции директивной ссылки, как используется «futureParentElement»?

Question

В angular documentation for the compile service (starting at line 412) есть описание функции transclude, которая передается в функцию связывания директивы.

Соответствующая часть гласит:

function([scope], cloneLinkingFn, futureParentElement) 

, в котором (строка 212):

futureParentElement: определяет родителя, к которому cloneLinkingFn добавит клонированные элементы.

• по умолчанию: $element.parent() соотв. $element для transclude:'element' соответственно. transclude:true.

• нужны только для transcludes, которым разрешено содержат не HTML элементы (например, элементы SVG) и когда cloneLinkinFn пройдена, , как эти элементы должны создаваться и клонировали особым образом, когда они определяются вне их обычного контейнеры (например, <svg>).

• См. Также directive.templateNamespace Недвижимость.

Я не вижу смысла futureParentElement однако. В нем написано:

определяет родителя, к которому cloneLinkingFn добавит клонированные элементы.

Но вы что в самом cloneLinkingFn как это:

transclude(scope, function (clone) { 
    some_element.append(clone); 
}); 

И вы не можете использовать функцию transclude без определения функции клонирования в первую очередь.

Что такое правильное использование/использование для futureParentElement?

Answer 1

Ответ на этот вопрос можно найти, посмотрев на на git blame of compile.js: коммит, который добавил futureParentElement является https://github.com/angular/angular.js/commit/ffbd276d6def6ff35bfdb30553346e985f4a0de6

В коммите есть тест, который проверяет директиву svgCustomTranscludeContainer

directive('svgCustomTranscludeContainer', function() { 
    return { 
    template: '<svg width="400" height="400"></svg>', 
    transclude: true, 
    link: function(scope, element, attr, ctrls, $transclude) { 
     var futureParent = element.children().eq(0); 
     $transclude(function(clone) { 
     futureParent.append(clone); 
     }, futureParent); 
    } 
    }; 
}); 

тестирование как составление HTML-<svg-custom-transclude-container><circle cx="2" cy="2" r="1"></circle> ведет себя:

it('should handle directives with templates that manually add the transclude further down', inject(function() { 
    element = jqLite('<div><svg-custom-transclude-container>' + 
     '<circle cx="2" cy="2" r="1"></circle></svg-custom-transclude-container>' + 
     '</div>'); 
    $compile(element.contents())($rootScope); 
    document.body.appendChild(element[0]); 

    var circle = element.find('circle'); 
    assertIsValidSvgCircle(circle[0]); 
})); 

Таким образом, похоже, что если вы создаете образ SVG с директивой, оболочка шаблонов которой транслирует содержимое SVG в теги <svg> ... </svg>, то это изображение SVG не будет действительным (по некоторому определению), если вы не передадите правильный futureParentElement в $transclude ,

Попытка увидеть, что на самом деле означает быть недействительным, за пределами теста в исходном коде, я создал 2 директивы на основе те, которые были в модульном тесте, и использовал их, чтобы попытаться создать изображение SVG с частичным кругом , Один помощью futureParentElement:

<div><svg-custom-transclude-container-with-future><circle cx="1" cy="2" r="20"></circle></svg-custom-transclude-container></div> 

и тот, который является идентичным, но это не:

<div><svg-custom-transclude-container-without-future><circle cx="2" cy="2" r="20"></circle></svg-custom-transclude-container></div> 

Как можно видеть на http://plnkr.co/edit/meRZylSgNWXhBVqP1Pa7?p=preview, один с futureParentElement показывает частичный круг, и тот, без этого нет. Структура DOM представляется идентичной. Однако Chrome, похоже, сообщает, что второй элемент circle не является узлом SVG, а является простым узлом HTML.

Так что независимо от того, что делает futureParentElement, под капотом, похоже, убедитесь, что транслируемый контент SVG попадает в SVG браузером.