2016-07-01 10 views
2

Angular 1.5 eingeführt multi-slot transclusion. Nach the docs:Wie greife ich aus der transclude-Funktion auf die Einschleifungsslots zu?

der transcluden Objekt {Slota: '? MyCustomElement'} abbildet Elemente zum Slota-Slot, der kann über die $ transcluden Funktion

Leider es nicht zugegriffen werden Geben Sie Beispiele dafür. Das einzige Beispiel, es gibt Slots nicht erwähnt überhaupt:

$transclude(function(clone, scope) { 
    element.append(clone); 
    transcludedContent = clone; 
    transclusionScope = scope; 
}); 

Kann jemand etwas Licht auf, wie jeder Schlitz für den Zugriff auf die $ transcluden-Funktion?

Antwort

11

Ich hatte ähnliches Problem, aber das Lesen Quellcode von ng-transclude hilft. Es stellt sich heraus, dass es ein drittes Argument für die $ transclude-Funktion gibt, nämlich den Slot-Namen.

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngTransclude.js#L190

Einfaches Beispiel:

angular.module('app', []); 
 

 
angular 
 
    .module('app') 
 
    .directive('dir', function() { 
 
    return { 
 
     transclude: { 
 
     a: 'aT', 
 
     b: 'bT' 
 
     }, 
 
     link: function (scope, elem, attrs, ctrl, transclude) { 
 
     transclude(function (content) { 
 
      elem.append('<div>a</div>'); 
 
      elem.append(content); 
 
     }, null, 'a'); 
 
     
 
     transclude(function (content) { 
 
      elem.append('<div>b</div>'); 
 
      elem.append(content); 
 
     }, null, 'b'); 
 
     } 
 
    }; 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script> 
 

 
<div ng-app="app"> 
 
    <dir> 
 
    <a-t>content of a</a-t> 
 
    <b-t>content of b</b-t> 
 
    </dir> 
 
</div>

+1

Was ist der zweite Parameter, die Sie in 'null' vorbei? – adamdport

+0

Umfang. Sie können den Umfang der Übertragung in einen benutzerdefinierten Bereich ändern, wenn Sie dies wünschen. – sielakos

+5

Das ist nicht 100% richtig. Der Umfang kann mit dem ersten optionalen Parameter (hier: unbenutzt) geändert werden. Für den Parameter 'futureParentElement' gilt' null'. Der Slot-Parameter ist jedoch korrekt. Die vollständige Deklaration ist 'function ([scope], cloneLinkingFn, futureParentElement, slotName)' (Quelle: https://docs.angularjs.org/api/ng/service/$compile) –