it-swarm.com.de

AngularJS - Greifen Sie in der Link-Funktion der Direktive auf den isolierten Bereich zu

Ich gebe einen ersten Versuch bei AngularJS benutzerdefinierten Anweisungen.

Ich habe Probleme, den isolierten Geltungsbereich in der Link-Funktion der Direktive zu verwenden (oder zu verstehen ...).

Hier ist der Code dieses Teils meiner App:

view.html

...
<raw-data id="request-data" title="XML of the request" data="request">See the request</raw-data>
...

request ist eine Variable, die im Gültigkeitsbereich von viewCtrl veröffentlicht wird und die xml-Zeichenfolge einer Anforderung enthält.

rawData.js

directives.directive('rawData', function() {

    return {
        restrict : 'E',
        templateUrl : 'partials/directives/raw-data.html',
        replace : true,
        transclude : true,
        scope : {
            id : '@',
            title : '@',
            data : '='
        },
        link : function($scope, $elem, $attr) {
            console.log($scope.data); //the data is correclty printed
            console.log($scope.id); //undefined
        }
    };
});

raw-data.html

<div>
    <!-- Button to trigger modal -->
    <a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude></a>

    <!-- Modal -->
    <div id="{{id}}Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{id}}Modal" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">{{ title }}</h3>
        </div>
        <div class="modal-body">
            <textarea class="input-block-level" rows="10">{{ data }}</textarea>
        </div>
        <div class="modal-footer">
            <!-- <button class="btn" ng-click="toggleTagText('')">{{'cacher'}} l'image</button> -->
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fermer</button>
        </div>
    </div>
</div>

Ich verstehe nicht, warum die ID korrekt angezeigt wird, wenn das Modal erscheint, aber wenn ich versuche, sie zu console.log(), ist ihr Wert undefiniert.

Vielleicht irre ich mich mit dem isolierten Bereichswert (= Und @).

Danke fürs Lesen. :)

28
pdegand59

Mit @ Gebundene Bereichseigenschaften isolieren sind in der Verknüpfungsfunktion nicht sofort verfügbar. Sie müssen $observe Verwenden:

$attr.$observe('id', function(value) {
   console.log(value);
});

Ihre Vorlage funktioniert ordnungsgemäß, da Angular automatisch die Isolate-Scope-Eigenschaft id für Sie aktualisiert. Und wenn sie aktualisiert wird, wird auch Ihre Vorlage automatisch aktualisiert.

Wenn Sie nur Zeichenfolgen übergeben, können Sie die Werte einfach einmal auswerten, anstatt die Bindung @ Zu verwenden:

link: function($scope, $elem, $attr) {
    var id    = $attr.id;
    var title = $attr.title
    console.log(id, title);
}

In Ihrem Fall sollten Sie jedoch @ Verwenden, da Sie die Eigenschaften in Vorlagen verwenden möchten.

Wenn Sie keine Vorlagen verwendet haben, ist @ Nützlich, wenn Attributwerte {{}} Enthalten - z. B. title="{{myTitle}}". Dann wird die Notwendigkeit, $observe Zu verwenden, deutlicher: Ihre Verknüpfungsfunktion möchte möglicherweise jedes Mal etwas tun, wenn sich der Wert von myTitle ändert.

35
Mark Rajcok

Dies ist beabsichtigt und hat mit der Kompilierungsreihenfolge und der Differenz zwischen '@' und '=' zu tun.

Einige Auszüge aus diese Google Groups-Diskussion mit Beiträgen von Misko :

@ und = machen sehr unterschiedliche Dinge. Einer kopiert den Attributwert (der interpoliert werden kann) und der andere behandelt den Attributwert als Ausdruck.

@attrs werden erst später interpoliert, sodass sie zum Zeitpunkt der Verknüpfung nicht verfügbar sind. Wenn Sie mit ihnen in der Link-Funktion etwas anfangen wollen, müssen Sie sich entweder manuell interpolieren

10
Dan

Sie können die von mir erstellte JSFiddle hier besuchen: http://jsfiddle.net/7t984sf9/5/ :

link: function($scope, $elem, $attr) {
    console.log($scope.onewayObject);
    $attr.$observe('onewayObject', function(value) {
         console.log(value);
    });
}

Oder eine ausführlichere Erklärung hier: Was ist der Unterschied zwischen & vs @ und = in angleJS

0
Joy

nun, keine der obigen Antworten hat tatsächlich einen Schlüsselaspekt erwähnt, selbst mit '=' scheint es mir nicht möglich zu sein, direkt auf den Gültigkeitsbereich innerhalb der Link-Funktion zuzugreifen.

scope: {
    data: '=',
},
link: function(scope, elem, attrs) {
    console.debug(scope.data); // undefined

aber Sie können den Bereich in der internen Funktion zugreifen,

link: function(scope, elem, attrs) {
    scope.saveComment = function() {
        console.debug(scope.data);

aus diesem Grund scheint es für mich eine zeitliche Verzögerung zu geben, in der scope.data verfügbar sein kann.

0
windmaomao