Question

给出指令＆＃39; wrap-input＆＃39;：

scope: {},
transclude: 'element',
template: '<div>' +
          '<ng-transclude></ng-transclude>' +
          '</div>'

像这样使用：

<input wrap-input></input>

我希望结果是它根据模板转换整个输入元素并将其包装在div中。但它没有，它只是在那里留下评论，没有放置。你如何获得指令来应用转换元素的模板？

预期：

<div>
  <input wrap-input></input>  
</div>

实际

<!-- wrapInput:  -->

Answer 1

您可以使用角度元素

提供的wrap功能

link: function(scope, element, attributes){
    element.wrap('<div />');
}

小提琴：http://jsfiddle.net/fa54a/

Answer 2

要将transclude: 'element'与template或templateUrl一起使用，您还必须设置replace: true。有关说明，请参阅#3368。

如果你想将transcluded元素放在某些兄弟姐妹之间，你必须在链接中使用transclude函数而不是ng-transclude，如下所示：

.directive('wrapInput', function() {
  return {
    scope: {},
    transclude: 'element',
    replace: true,
    template: '<div>' +
        '<div>Sibling A</div>' + 
        '<div class="transclution-point"></div>' +
        '<div>Sibling B</div>' +
      '</div>',
    link: function (scope, element, attrs, controllers, transcludeFn) {
      transcludeFn(function (clone) {
        element.find('.transclution-point').replaceWith(clone);
      });
    }
  };
});

示例plunker： http://plnkr.co/edit/tkMCZB6vxNOwSiLwYbkp?p=preview

带有＆＃39;元素＆＃39;的角度模板transclusion

2 个答案: