javascript - 函数作为第二个参数传递给链接函数的目的是什么

Question

我刚刚偶然发现了以下代码:

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

我的问题是，在 Angular 框架中，作为第二个参数传递给链接函数的函数的目的是什么？我不是询问回调的目的是什么。

在文档中它说 $compile 返回:

function(scope, cloneAttachFn=, options=)   

所以这第二个参数函数似乎是cloneAttachFn。现在我想知道它是否与 transcluded 函数中的 cloneAttachFn 具有相同的目的？

Answer 1

此函数允许您访问绑定(bind) View 并克隆 模板。它还允许您将之前克隆的元素放置在任何您想要的位置。

与传统的区别

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>

另一方面，当您提供克隆附加功能时，该元素将始终是原始元素的克隆。

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 中。

该函数的目的是告诉 Angular 如何处理模板引用，要么直接链接它，要么先制作一个克隆，然后链接克隆。