嵌入函数和克隆链接函数到底是做什么的?

2024-04-30

来自指令 Angular 文档 http://docs.angularjs.org/guide/directive,我看到compile函数有3个参数,其中之一是transclude。文档提供的唯一解释是:

transclude - 嵌入链接函数:function(scope,cloneLinkingFn)。

我试图了解您在克隆链接功能中到底要做什么。我什至不知道传递给它的参数是什么。我发现一个例子 http://jsfiddle.net/vt8BF/2/有一个参数称为clone这似乎是一个 HTML 元素。还有其他参数可用吗?这究竟是哪个 HTML 元素?我也在考虑可能使用transclude: 'element'在我的指令中。使用时这些问题的答案会改变吗'element'代替true?

我通过简单的例子来理解嵌入,但我似乎找不到更复杂的例子,尤其是transclude: 'element'。我希望有人能够对这一切提供更彻底的解释。谢谢。


编辑:完全改变我的答案并将其标记为“社区维基”(对我来说意味着没有积分),因为当我回答这个问题时我完全错了

正如@Jonah 下面指出的,这是一篇关于指令的编译选项和使用嵌入函数的非常好的文章 http://liamkaufman.com/blog/2013/05/13/understanding-angularjs-directives-part1-ng-repeat-and-compile/

基本思想是编译函数应该返回一个链接函数。您可以使用链接函数内提供的嵌入函数来克隆嵌入的 DOM 元素,对其进行编译,然后将其插入到需要插入的位置。

这是我在 Plunker 上从屁股里拿出来的一个更好的例子 http://plnkr.co/edit/eydYuG5LGCQJBzsBJDJB?p=preview

编译函数的想法是,它让您有机会根据创建和调用链接函数之前传递的属性以编程方式更改 DOM 元素。

// a silly directive to repeat the items of a dictionary object.
app.directive('keyValueRepeat', function ($compile){
  return {
    transclude: true,
    scope: {
      data: '=',
      showDebug: '@'
    },
    compile: function(elem, attrs, transclude) {

      if(attrs.showDebug) {                
        elem.append('<div class="debug">DEBUG ENABLED {{showDebug}}</div>');
      }

      return function(scope, lElem, lAttrs) {
        var items = [];
        console.log(lElem);
        scope.$watch('data', function(data) {

          // remove old values from the tracking array
          // (see below)
          for(var i = items.length; i-- > 0;) {
            items[i].element.remove();
            items[i].scope.$destroy();
            items.splice(i,1);
          }

          //add new ones
          for(var key in data) {

            var val = data[key],
                childScope = scope.$new(),
                childElement = angular.element('<div></div>');

            // for each item in our repeater, we're going to create it's
            // own scope and set the key and value properties on it.
            childScope.key = key;
            childScope.value = val;

            // do the transclusion.
            transclude(childScope, function(clone, innerScope) {
              //clone is a copy of the transcluded DOM element content.
              console.log(clone);

              // Because we're still inside the compile function of the directive,
              // we can alter the contents of each output item
              // based on an attribute passed.
              if(attrs.showDebug) {                
                clone.prepend('<span class="debug">{{key}}: {{value}}</span>');
              }

              //append the transcluded element.
              childElement.append($compile(clone)(innerScope));
            });

            // add the objects made to a tracking array.
            // so we can remove them later when we need to update.
            items.push({
              element: childElement,
              scope: childScope
            });

            lElem.append(childElement);
          }
        });
      };
    }
  };
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

嵌入函数和克隆链接函数到底是做什么的? 的相关文章

随机推荐