angularjs - 对 Angularjs 的嵌入和隔离范围和绑定(bind)感到困惑

Question

我正在努力理解模型的范围及其与范围有限的指令的绑定(bind)。

我知道限制指令的范围意味着 controller.$scope 和directive.scope 不再是同一件事。但是，我对在指令模板或 html 中放置模型如何影响数据绑定(bind)感到困惑。我觉得我错过了一些非常基本的东西，要继续前进，我需要理解这一点。

获取以下代码(此处为 fiddle :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>

模型只更新 {{title}}在模板中，以及 {{data.title}}在嵌入中。 为什么不 {{title}}在嵌入中也没有{{data.title}}在模板中？

像这样将输入移动到嵌入中(这里 fiddle : 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>

现在意味着只嵌入 {{data:title}}得到更新。 为什么不是模板 {{title}}或 {{data.title}} , 也不包含 {{title}} ?

最后，将输入移动到模板中，就像这样(在这里摆弄: 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>'

现在意味着只有模板 {{data.title}}得到更新。 同样，为什么不是其他 3 个绑定(bind)？

我希望有什么明显的东西在盯着我看，我想念它。如果你让我得到这个，我会给你买啤酒，或者给你一些积分，或者其他类似的东西。非常感谢。

Answer 1

在阅读了所有提供的答案后，包括 Mark 的精彩示意图，这是我对范围的理解，并且它是我的问题的继承。我希望能对这张图在哪里下降的评论，以便我可以适本地更新。我希望它只是提供与 Mark 所呈现内容不同的观点: