Question

我试图通过将md-autocomplete包装在我自己的指令中来扩展{{3}}：

//..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>之间？

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

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

1 个答案: