angularjs - transclude - directive angular 6




Confus au sujet de Angularjs transcluded et isoler les étendues et fixations (2)

J'ai du mal à comprendre la portée des modèles et de leurs consolidations par rapport aux directives qui ont une portée limitée.

J'obtiens que restreindre la portée sur une directive signifie que controller. $ Scope et directive.scope ne sont plus la même chose. Cependant, je suis confus sur la façon dont le placement des modèles soit dans le modèle de la directive ou dans le HTML affecte la liaison de données. Je sens qu'il me manque quelque chose de fondamental et pour aller de l'avant, 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 ne met à jour que {{title}} dans le modèle, et {{data.title}} dans la transclusion. Pourquoi pas {{title}} dans la transclusion ni {{data.title}} dans le modèle?

Déplacer l'entrée à l'intérieur de la transclusion comme si (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>

signifie maintenant que seulement transclude {{data:title}} est mis à jour. Pourquoi ne pas utiliser le modèle {{title}} ou {{data.title}} , ni transposer {{title}} ?

Et enfin, en déplaçant l'entrée à l'intérieur du modèle, comme ça (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>'

Désormais, seul le modèle {{data.title}} est mis à jour. Encore une fois, pourquoi pas les 3 autres reliures?

J'espère qu'il y a quelque chose d'évident qui me regarde en face et qui me manque. Si vous m'obtenez cela, je vous achèterai une bière, ou vous donnerai des points, ou quelque chose de ce genre. Merci beaucoup.


Après avoir lu toutes les réponses présentées, y compris les fantastiques schémas de Mark, voici ma compréhension de la portée et de l'héritage de ma question. J'apprécierais les commentaires sur l'endroit où ce diagramme tombe, afin que je puisse mettre à jour de façon appropriée. J'espère que cela donne simplement une vision différente de ce que Mark a présenté:


Bien demandé, btw! J'espère que ma réponse est aussi éloquente ..

La réponse a à voir avec la façon dont les éléments transcrits obtiennent leur portée.

Pour résumer, vous avez deux champs d'application:

  1. La portée du contrôleur, qui a $scope.data.title . (Ajouté implicitement par votre élément d' input )
  2. La portée de la directive, qui a $scope.title .

Lorsque vous modifiez $scope.data.title du contrôleur, $scope.data.title directive change également.

Vous avez également deux sections de HTML, le transcluded et le modèle. Qu'est-ce qui se passe, c'est que le HTML transclus est dans la portée du contrôleur , et le modèle HTML est dans la portée de la directive . Donc le HTML transcrit ne sait rien sur le title , et la portée du template ne sait rien sur data.title

C'est en fait exactement ce à quoi était destinée Transclusion - pour permettre aux éléments enfants d'une directive de conserver leur portée parent , dans ce cas la portée du contrôleur. De par leur conception, les éléments transcrits ne le savent pas dans une directive, et n'ont donc pas accès à la portée de la directive.

D'autre part, les modèles de directives n'auront accès qu'au champ d'application de la directive.

J'ai un peu modifié votre code pour rendre les noms un peu plus clairs (même fonctionnalité, cependant)

http://jsfiddle.net/yWWVs/2/





angularjs-scope