Wie kann man mit ng-transclude md-Autocomplete erweitern? [! Illegale Verwendung von ngTransclude Direktive in der Vorlage]

Question

Ich versuche md-autocomplete zu erweitern, indem es in meiner eigenen Richtlinie wie diese Verpackung:

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

Hoffentlich kann ich HTML verwenden:

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

So

ich im Grunde, was ich nach, dass, wenn <my-custom-autocomplete> der endgültige Code etwas gemacht wird, wie dies zu:

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

, d. H. Der HTML-Code innerhalb <my-custom-autocomplete> wird zwischen der <md-autocomplete>-Anweisung eingefügt.

Leider funktioniert das nicht und ich erhalte immer diese Fehlermeldung:

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"> 

Meine Fragen sind:

1. Was mache ich falsch?
2. Wie kann ich den HTML-Code aus meiner benutzerdefinierten Anweisung einfügen und ihn vor dem Rendern zwischen <md-autocomplete> platzieren?

Answer 1

Ich stieß auf das gleiche Problem, und nach viel Basteln, habe ich eine funktionierende Lösung gefunden. Die md-autocomplete verwendet Template-Manipulation anstelle von ng-transclusion, um den inneren Inhalt zu setzen. Unabhängig davon, wo Sie Ihre Transclosions-Tags platzieren, werden sie durch die automatische Vervollständigung entfernt, da sie Ihren HTML-Code vollständig in den HTML-Code für die automatische Vervollständigung umschreibt.

Die Lösung erwies sich als nicht auf die Einfügung, sondern stattdessen auf die gleiche Art der Vorlagenmanipulation, die Angular selbst verwendet.

Hier ist eine Geige von einer Arbeitslösung: http://jsfiddle.net/Pluisjen/h3n1ch0f/

Und hier ist der Knackpunkt die Möglichkeit, mit der md-item-Vorlage zu überschreiben:

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