angularjs - 如何使用 ng-transclude 扩展 md-autocomplete？ [在模板中非法使用 ngTransclude 指令!]

Question

我正在尝试扩展 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">

我的问题是:

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

Answer 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>'; },