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

What the purpose of the function passed to linking function as a second parameter

本文关键字：函数 是什么 链接 第二个 参数传递      更新时间：2023-09-26

我偶然发现了下面这段代码:

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具有相同的目的?

此函数允许您访问绑定视图并克隆模板。它还允许您将先前克隆的元素放置在您想要的任何位置。

与传统

的区别
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如何处理模板引用，要么直接链接它，要么先创建一个克隆，然后再链接克隆。

相关文章：