AngularJS-Direktive, verwendet das ursprüngliche element type-in-Vorlage

Ich bin der Entwicklung von UI-und Typografie-basierte Richtlinien für Eckige. In solchen Fällen das element der Richtlinie angewandt wird, ist unbekannt - alles von einem div, span, h1, um eine h5.

Der Grund für die Verwendung einer Vorlage ist, so kann ich hinzufügen ng-* Richtlinien (so der Entwickler nicht brauchen, um an etwas zu erinnern, aber die Richtlinie name).

Hatte, habe ich mit begrenztem Erfolg, Attribute hinzufügen und neues element. Kein Erfolg, wenn es um das hinzufügen ng-transclude jedoch. Erstellen ein neues element und ersetzen Sie die alte kommt mit Integrationsproblemen (ignorieren Sie die anderen Richtlinien und data-Attribute, die sich möglicherweise auf das element), hatte wenig Erfolg kopieren dieser Attribute, und indem Sie Sie auf das neue element.

Dieser scheint, wie es sollte wirklich einfach sein, da template selbst ändern kann, das element, auf das, was Sie angeben (mit transclude und replace), sicherlich gibt es die 'lange Weg, es zu tun'?

Es ist schade, dass Sie nicht tun können, die folgenden:

module.directive( 'myDir', [ '$window', function( $window ) {
    return {
        restrict: "A",
        controller: function( $scope, $element ) {
            $scope.tag = $element[0].nodeName;
        }
        template: "<{{tag}} data-ng-transclude ng-*=''></{{tag}}>",
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) {

        }
    }   
}]);

Ich denke, das große Problem ist ich bin auf der Suche zu ersetzen und transclude das element mit der Vorlage, nicht die Vorlage hinzufügen (oder kompilieren Sie das element) wie ein Kind.

Ich habe seit ersetzt die Notwendigkeit für ng-* und Vorlagen mit vanilla JS in meinem code, zB:

<div data-ng-style="{'font-size':fontSize}></div>

mit

element[0].style.fontSize = scope.fontSize;

Da stellt sich die Frage nach der Vorteil der Verwendung von vielen ng-* Richtlinien? Ist es gerade 'die Winkel-Weg"?

InformationsquelleAutor Patrick | 2013-11-22
  1. 30

    Ich habe grübelt über diese Frage für ein paar Wochen, bis ich realisiert hatte, dass template könnte eine Funktion mit der Fähigkeit, Zugang element und attrs. Also ich war in der Lage, um wieder eine Vorlage mit dem bestehenden element-tags.

    module.directive( 'myDir', [ '$window', function( $window ) {
    return {
        restrict: "A",
        template: function( element, attrs ) {
            var tag = element[0].nodeName;
            return "<"+tag+" data-ng-transclude ng-*=''></"+tag+">";
        },
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) {

        }
    }   
}]);

    HTML -

    <div data-my-dir>
    <span>some other stuff</span>
    <div>more stuff</div>
</div>

<span data-my-dir></span>

<h1 data-my-dir></h1>

    - Ausgang

    <div ng-*="" data-ng-transclude="" data-my-dir="">
    <span class="ng-scope">some other stuff</span>
    <div class="ng-scope">more stuff</div>
</div>

<span ng-*="" data-ng-transclude="" data-my-dir=""></span>

<h1 ng-*="" data-ng-transclude="" data-my-dir=""></h1>
    InformationsquelleAutor Patrick
Schreibe einen Kommentar