Usiłuję zrozumieć zakres modeli i ich powiązań w odniesieniu do dyrektyw, które mają ograniczony zakres.

Dostaję, że ograniczenie zakresu dyrektywy oznacza, że ​​kontroler. $ Scope i dyrektywa.scope nie są już tym samym. Jestem jednak zdezorientowany tym, jak umieszczanie modeli w szablonie dyrektywy lub w html wpływa na powiązanie danych. Czuję, że tęsknię za czymś bardzo podstawowym i aby przejść dalej, muszę to zrozumieć.

Weź następujący kod (baw się tutaj: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>

Model aktualizuje się tylko{{title}} w szablonie i{{data.title}} w transkluzji.Dlaczego nie{{title}} w transkluzji ani{{data.title}} w szablonie?

Przesuwanie danych wejściowych do wewnątrz transkluzji w ten sposób (skrzypce tutaj: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>

teraz oznacza tylko transkluzję{{data:title}} zostaje zaktualizowany.Dlaczego nie ma żadnego szablonu{{title}} lub{{data.title}}, ani transkluzji{{title}}?

I na koniec, przesuwając dane wejściowe do szablonu, tak (fiddle here: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>'

Teraz oznacza tylko ten szablon{{data.title}} zostaje zaktualizowany.Ponownie, dlaczego nie pozostałe 3 wiązania?

Mam nadzieję, że coś oczywistego wpatruje się we mnie i tęsknię za tym. Jeśli sprawisz, żebym to zrozumiał, kupię ci piwo, albo dam ci kilka punktów, albo coś takiego. Wielkie dzięki.