Verwirrt über Angularjs abgelegene und isolierte Bereiche und Bindungen

Ich kämpfe darum, den Anwendungsbereich von Modellen und ihre Bindungen in Bezug auf Richtlinien zu verstehen, die einen begrenzten Anwendungsbereich haben.

Wenn ich den Gültigkeitsbereich einer Direktive einschränke, bedeutet dies, dass controller. $ Scope und direction.scope nicht mehr dasselbe sind. Ich bin jedoch verwirrt darüber, wie sich die Platzierung von Modellen innerhalb der Direktivenvorlage oder im HTML auf die Datenbindung auswirkt. Ich habe das Gefühl, dass mir etwas sehr Grundlegendes fehlt, und um weitermachen zu können, muss ich dies verstehen.

Nimm den folgenden Code (Geige 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>

Das Modell wird nur aktualisiert{{title}} innerhalb der Vorlage und{{data.title}} in der Transklusion.Warum nicht{{title}} in der Transklusion noch{{data.title}} in der Vorlage?

Verschieben der Eingabe in die Transklusion wie folgt (hier fummeln: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>

jetzt heißt nur noch transkludieren{{data:title}} wird aktualisiert.Warum nicht eine der Vorlagen?{{title}} oder{{data.title}}noch transkludieren{{title}}?

Und schließlich verschieben Sie die Eingabe wie folgt in die Vorlage (hier fummeln: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>'

Jetzt heißt das nur Vorlage{{data.title}} wird aktualisiert.Nochmals, warum nicht die anderen 3 Bindungen?

Ich hoffe, es gibt etwas Offensichtliches, das mich ins Gesicht starrt und ich vermisse es. Wenn ich das bekomme, kaufe ich dir ein Bier oder gebe dir Punkte oder ähnliches. Danke vielmals.

Antworten auf die Frage(3)

Ihre Antwort auf die Frage