相关疑难解决方法(0)

我正在努力理解模型的范围及其对范围有限的指令的约束.

我认为限制指令的范围意味着控制器.$ scope和directive.scope不再是同一个东西.但是,我对如何在指令模板或html中放置模型影响数据绑定感到困惑.我觉得我缺少一些非常基础的东西,继续前进我需要理解这一点.

请使用以下代码(在此处小提琴: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}}在模板中？

将输入移动到translude中就像这样(在这里小提琴:http://jsfiddle.net/eV8q8/1/):

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