Verwirrt über Angularjs transcluded und isolieren Scopes & amp; Bindungen

Ich bin kämpfen, um zu verstehen, den Umfang der Modelle und deren Bindungen in Bezug auf Richtlinien, die mit geringem Umfang.

Ich, dass eine Beschränkung des Anwendungsbereichs auf eine Richtlinie bedeutet, dass der controller.$Umfang und Richtlinie.Rahmen sind nicht mehr das gleiche. Aber ich bin verwirrt darüber, wie die Unterbringung der Modelle, entweder im Rahmen der Richtlinie Vorlage oder in die html auf Daten verbindlich. Ich glaube, ich bin fehlt etwas sehr grundlegendes und zu bewegen, ich brauche, um das zu verstehen.

Nehmen Sie den folgenden code (fiddle hier: http://jsfiddle.net/2ams6/)

JavaScript

var app = angular.module('app',[]);
app.controller('Ctrl',function($scope){
});
app.directive('testel', function(){
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        transclude: true,
        template:   '<div ng-transclude>'+
                    '<h3>Template title: {{title}}</h3>' +
                    '<h3>Template data.title:{{data.title}}</h3>' +
                    '</div>'
    }    
});

HTML

<div ng-app='app'>
    <div ng-controller="Ctrl">
        <input ng-model="data.title">
        <testel title="{{data.title}}">
            <h3>Transclude title:{{title}}</span></h3>
            <h3>Transclude data.title:{{data.title}}</h3>
        </testel>
    </div>
</div>

Modell nur updates {{title}} innerhalb der Vorlage, und {{data.title}} in der transklusion. Warum nicht {{title}} in der transklusion noch {{data.title}} in der Vorlage?

Bewegen die Eingabe in die transklusion so (fiddle hier: http://jsfiddle.net/eV8q8/1/):

<div ng-controller="Ctrl">
    <testel title="{{data.title}}">
        <input ng-model="data.title">
         <h3>Transclude title: <span style="color:red">{{title}}</span></h3>

         <h3>Transclude data.title: <span style="color:red">{{data.title}}</span></h3>

    </testel>
</div>

nun bedeutet, dass nur transclude {{data:title}} aktualisiert wird. Warum nicht entweder Vorlage {{title}} oder {{data.title}} noch transclude {{title}}?

Und schließlich bewegen die Eingabe in die Vorlage, wie so (fiddle hier: http://jsfiddle.net/4ngmf/2/):

template: '<div ng-transclude>' +
            '<input ng-model="data.title" />' +
            '<h3>Template title: {{title}}</h3>' +
            '<h3>Template data.title: {{data.title}}</h3>' +
            '</div>'

Nun bedeutet, dass nur die Vorlage {{data.title}} aktualisiert wird. Wieder, warum nicht die anderen 3 Bindungen?

Ich hoffe, es ist etwas offensichtlich, starrte mir ins Gesicht und ich vermisse es. Wenn Sie mir, diese zu erhalten, werde ich Sie kaufen ein Bier, oder geben Sie einige Punkte oder einige andere solche Sache. Vielen Dank.

InformationsquelleAutor der Frage dewd | 2013-05-20

113

Ihre Geigen erstellen Sie drei Bereiche:
1. einem Bereich zugeordnet controller Ctrl wegen ng-controller
2. eine Richtlinie transcluded Umfang, weil der transclude: true
3. eine Richtlinie isolieren Umfang, weil der scope: { ... }
In fiddle1, bevor wir geben alles in die text-box haben wir die folgenden:

Umfang 003 ist der Umfang im Zusammenhang mit dem controller. Da wir nicht geben Sie in das Textfeld, und doch, es gibt keine data Eigenschaft. In isolieren Umfang 004, sehen wir, dass title Eigenschaft wurde erstellt, aber es ist leer. Es ist leer, da der übergeordnete Rahmen nicht data.title Eigenschaft noch.

Nach der Eingabe my title in das Textfeld, wir haben jetzt:

Controller Geltungsbereich 003 hat nun eine neue data Objekt-Eigenschaft (die ist, warum es gelb gefärbt ist), die eine title Eigenschaft nun my title. Seit isolieren Eigenschaft scope (Bereich) title one-way-Datenbindung, um den interpolierten Wert von data.titlees wird auch der Wert my title (der Wert ist gelb gefärbt, weil es sich verändert).

Den transcluded Rahmen vorbildgerecht erbt von der controller-scope, also innerhalb der transcluded HTML -, Winkel-können die Folgen der Prototyp-Kette und finden $scope.data.title im übergeordneten Bereich (aber $scope.title dort nicht vorhanden).

Isolieren Umfang hat nur Zugriff auf seine eigenen Eigenschaften, daher nur Eigenschaft title.

In fiddle2, vor der Eingabe haben wir das gleiche Bild wie in fiddle1.

Nach der Eingabe my title:

Bemerken, wo die neue data.title Eigenschaft zeigte sich -- auf die transcluded Umfang. Das Isolat Umfang ist noch auf der Suche nach data.title auf Bereich der Steuerung, aber es ist nicht diese Zeit, so seine title Wert der Eigenschaft bleibt leer.

In fiddle3, vor der Eingabe haben wir das gleiche Bild wie in fiddle1.

Nach der Eingabe my title:

Bemerken, wo die neue data.title Eigenschaft zeigte sich -- auf das Isolat Umfang. Keiner der anderen Bereiche haben Zugang zum isolieren Umfang, so dass der string my title wird nicht angezeigt, sonst nirgends.

Update für Winkel-v1.2:

Mit ändern eed299a Winkel-löscht nun die transklusion Punkt vor transcluding, so die Template title: ... und Template data.title: ... Teile nicht angezeigt, es sei denn, Sie ändern die Vorlage, so dass ng-transclude ist von selbst, wie zum Beispiel:
```
'<h3>Template title: <span style="color:red">{{title}}</span></h3>' +
'<h3>Template data.title: <span style="color:red">{{data.title}}</span></h3>' +
'<div ng-transclude></div>'
```
In der update unten für die Winkel-v1.3, diese template-änderung vorgenommen wurde.

Update für Winkel-v1.3+:

Seit Eckige v1.3, die transcluded Umfang ist jetzt ein Kind der Richtlinie isolieren, Rahmen, eher als ein Kind der Bereich der Steuerung. So in fiddle1, bevor wir geben alles:

Die Bilder in diesem update gezogen werden mit dem Peri$scope tool, also die Bilder sind ein bisschen anders. Die @ zeigt an, wir haben ein Isolat scope-Eigenschaft, verwendet die @ syntax und der rosa hintergrund bedeutet, dass das tool war nicht in der Lage zu finden, ein Vorfahre Referenz für die Zuordnung (das ist wahr, da wir nicht die Möglichkeit geben etwas in der textbox noch).

Nach der Eingabe my title in das Textfeld, wir haben jetzt:

Isolieren, Eigenschaften, Verwendung @ Bindung wird immer zeigen die interpolierten string Ergebnis in der isolieren Umfang nach der @ symbol. Peri$scope war auch in der Lage zu finden, genau dieses string-Wert in einem Vorgänger-scope, so zeigt es auch eine Referenz auf diese Eigenschaft.

In fiddle 2, vor der Eingabe haben wir das gleiche Bild wie in fiddle1.

Nach der Eingabe my title:

Bemerken, wo die neue data.title Eigenschaft zeigte sich -- auf die transcluded Umfang. Das Isolat Umfang ist noch auf der Suche nach data.title auf Bereich der Steuerung, aber es ist nicht diese Zeit, so seine title Wert der Eigenschaft bleibt leer.

In fiddle3, vor der Eingabe haben wir das gleiche Bild wie in fiddle1.

Nach der Eingabe my title:

Bemerken, wo die neue data.title Eigenschaft zeigte sich -- auf das Isolat Umfang. Obwohl die transcluded Bereich hat Zugang zu isolieren Umfang über die $parent Beziehung, sehen Sie nicht es für title oder data.title - es wird nur der Blick in den controller-Bereich (D. H., es wird nach den prototypal inheritance), und die controller-Umfang der nicht diese Eigenschaften definiert.

InformationsquelleAutor der Antwort Mark Rajcok
22

Nach durchlesen der Antworten vorgestellt, darunter Mark ist fantastisch, Schaltpläne, dies ist mein Verständnis der Umfang und die erbschaft pro meine Frage. Ich würde mich über Kommentare, in denen dieses Diagramm fällt nach unten, damit ich aktualisieren kann, angemessen. Ich hoffe, es stellt einfach einen anderen Blick auf das, was Mark sich das vorgestellt hat:

InformationsquelleAutor der Antwort dewd
8

Gut gefragt, btw! Hoffe, meine Antwort ist so eloquent..

Die Antwort hat damit zu tun, wie transcluded Elemente erhalten Ihre Bereich.

Zusammen zu fassen, du hast zwei Bereiche:
1. Der controller-Rahmen, der hat $scope.data.title. (Implizit Hinzugefügt werden, indem Sie Ihre input element)
2. Der Anwendungsbereich der Richtlinie, die $scope.title.
Beim ändern der controller - $scope.data.title Richtlinie ist $scope.title auch verpasst.

Sie haben auch zwei Abschnitte von HTML, die transcluded und die Vorlage. Was passiert, ist, dass die transcluded HTML ist in der controller Umfang und die HTML-Vorlage ist in der Richtlinie Umfang. Also die transcluded HTML nicht wissen, etwas über titleund die Vorlage-Rahmen weiß nichts über data.title

Dies ist eigentlich genau das, was Transklusion gedacht war - zu ermöglichen untergeordneten Elemente einer Richtlinie behalten Sie Ihre übergeordneten Bereichin diesem Fall die controller-Bereich. Durch design, transcluded-Elemente nicht wissen, dass Ihr in einer Richtlinie, und daher haben Sie nicht den Zugang zu der Anwendungsbereich der Richtlinie.

Richtlinie Vorlagen, auf der anderen Seite, haben nur Zugang zu der Anwendungsbereich der Richtlinie.

Ich geändert habe deine code ein wenig, um dem Namen ein wenig klarer (gleiche Funktionalität)

http://jsfiddle.net/yWWVs/2/

InformationsquelleAutor der Antwort Roy Truelove

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.