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

tooltip是对原始元素的引用，而不是克隆

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如何处理模板引用，要么直接链接它，要么首先进行克隆，然后链接克隆。

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

1 个答案: