J'ai du mal à comprendre la portée de modèles et de leurs liaisons dans le respect des directives qui ont une portée limitée.
Je reçois que le fait de restreindre le champ d'application d'une directive signifie que contrôleur.$la portée et de la directive.la portée n'est plus la même chose. Cependant, je suis confus au sujet de la façon dont la mise de modèles au sein de la directive modèle ou dans le html affecte la liaison de données. Je sens que je vais manquer de quelque chose de fondamental et de passer j'ai besoin de comprendre cela.
Prenez le code suivant (violon ici: 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>
Le modèle met à jour uniquement {{title}} dans le modèle, et {{data.title}} dans la transclusion. Pourquoi ne pas {{title}} dans la transclusion, ni {{data.title}} dans le modèle?
Déplacement de l'entrée à l'intérieur de la transclusion comme (violon ici: 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>
maintenant signifie seulement transclude {{data:title}} est mis à jour. Pourquoi pas non plus de modèle {{title}} ou {{data.title}}, ni transclude {{title}}?
Et enfin, le déplacement de l'entrée à l'intérieur du modèle, comme (violon ici: 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>'
Maintenant signifie que seul modèle {{data.title}} est mis à jour. Encore une fois, pourquoi ne pas les 3 autres liaisons?
J'espère qu'il y est quelque chose d'évident me regarder en face et je suis absent. Si vous me l'avoir, je vais vous acheter une bière, ou de vous donner quelques points, ou quelque autre chose. Merci beaucoup.
