如何使用 ng-transclude 来扩展 md-autocomplete？ [在模板中非法使用 ngTransclude 指令！]答案

【问题标题】：How to use ng-transclude to extend md-autocomplete? [Illegal use of ngTransclude directive in the template!]如何使用 ng-transclude 来扩展 md-autocomplete？ [在模板中非法使用 ngTransclude 指令！]
【发布时间】：2016-09-22 03:38:36
【问题描述】：

我正在尝试通过将 md-autocomplete 包装在我自己的指令中来扩展它，如下所示：

//..other directive code    
template: '<div><md-autocomplete ng-transclude=""></md-autocomplete></div>';
transclude: true;

希望我可以使用这个 HTML：

<my-custom-autocomplete>
    <span>{{item.name}}</span>
</my-custom-autocomplete>

所以我基本上想要的是，当<my-custom-autocomplete> 被渲染时，最终代码会变成这样：

<my-custom-autocomplete><div><md-autocomplete><span>{{item.name}}</span></md-autocomplete></div></my-custom-autocomplete>

即<my-custom-autocomplete> 中的 html 代码将被嵌入到 <md-autocomplete> 指令之间。

不幸的是，这不起作用，我不断收到此错误：

angular.js:13550 Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <md-autocomplete ng-transclude="" tabindex="-1" class="ng-isolate-scope">

我的问题是：

我做错了什么？
如何在我的自定义指令中包含 HTML 并在渲染前将其置于 <md-autocomplete> 之间？

【问题讨论】：

标签： angularjs angularjs-directive angular-material angularjs-ng-transclude

【解决方案1】：

我遇到了同样的问题，经过大量修改后，我找到了一个可行的解决方案。 md-autocomplete 使用模板操作而不是 ng-transclusion 来设置内部内容。无论您将嵌入标签放在哪里，自动完成都会将它们剥离，因为它会将您的 html 完全重写为自动完成 html。

结果证明解决方案不依赖于嵌入，而是使用 Angular 本身使用的相同类型的模板操作。

这是一个可行的解决方案：http://jsfiddle.net/Pluisjen/h3n1ch0f/

这是选择覆盖 md-item-template 的关键：

template: function(elem, attr) { 
    getItemTemplateHtml = function() { return elem.find('md-item-template').html() || 'Default by directive' }
    return '<md-autocomplete layout-margin' +
                       'md-selected-item="first"' +
                       'md-items="i in firstOptions"' +
                       'md-min-length="0"' +                     
                       'md-item-text="i"' +
                       'ng-transclude' +
                       'placeholder="First">' +      
      '<md-item-template>' + getItemTemplateHtml() + '</md-item-template>' +
      '</md-autocomplete>'; },

【讨论】：