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

Question

Я просто наткнулся на следующий фрагмент кода:

var tooltipLinker = $compile(template); 
tooltip = tooltipLinker(tooltipLinkedScope, function(tooltip) { 
    if (appendToBody) { 
     $document.find('body').append(tooltip); 
    } else { 
     element.after(tooltip); 
    } 
}); 

Мой вопрос, какова цель этой функции передается в качестве второго параметр к функции связывания в угловом каркасе? Я не спрашиваю, какова цель обратных вызовов.

В документации говорится, что $compile возвращается:

function(scope, cloneAttachFn=, options=) 

Так что вторая функция параметра кажется cloneAttachFn. Теперь мне интересно, имеет ли он ту же цель, что и cloneAttachFn в функции transcluded?

Answer 1

Эта функция позволяет получить доступ к связанным представлениям и клон шаблон. Он также позволяет размещать ранее клонированный элемент там, где вы хотите.

Разница с традиционной

var tooltipLinker = $compile(template); 
var tooltip = tooltipLinker(tooltipLinkedScope); 

подсказкой является ссылкой к исходному элементу, а не клон

angular.module('app', []) 
 
    .directive('clone', function($compile) { 
 
    return { 
 
     restrict: 'E', 
 
     link: function($scope, $element) { 
 
     $scope.value = 10; 
 
     var elem = angular.element('<div>{{value}}</div>'); 
 
     var compiled = $compile(elem)($scope); 
 
     console.log('elem === compiled', elem === compiled); 
 
     } 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <clone></clone> 
 
</div>

В другой стороны, когда вы предоставляете клон прикрепить функцию, элемент будет всегда быть клоном origi nal.

angular.module('app', []) 
 
    .directive('clone', function($compile) { 
 
    return { 
 
     restrict: 'E', 
 
     link: function($scope, $element) { 
 
     $scope.value = 10; 
 
     var e; 
 
     var elem = angular.element('<div>{{value}}</div>'); 
 
     var compiled = $compile(elem)($scope, function(cloned, scope) { 
 
      e = cloned; 
 
     }); 
 
     console.log('elem === compiled', elem === compiled); 
 
     console.log('elem === callback element', elem === e); 
 
     } 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <clone></clone> 
 
</div>

В первом случае исходный элемент собран и готов к быть помещены в DOM, во втором случае составляется исходный элемент, но результат доступен в клоне.

Если у вас есть console.log элемент во втором случае, вы увидите, что на нем все еще есть символы интерполяции. Вместо этого вы должны поместить клон в DOM.

Целью функции является указание углового, что делать с ссылкой на шаблон, либо связать его напрямую, либо сделать клон первым, и связать клон вместо этого.