Angular js Imbrication des directives sur mesure

Je veux utiliser quelque chose comme imbrication des directives sur mesure en angular js. Quelqu'un pourrait-il m'expliquer avec la solution la plus simple ?

exemple de code est ci-dessous ne fonctionne pas pour moi :

<outer>
    <inner></inner>
</outer>

var app = angular.module('app',[]);
app.directive('outer',function(){
    return{
        restrict:'E',
        template:'<div><h1>i am a outer</h1></div>',
        compile : function(elem,attr){
            return function(scope,elem,att,outercontrol){
                outercontrol.addItem(1);
            }
        },
        controller : function($scope){
            this.addItem = function(val){
                console.log(val);
            }
        }
    }
});

app.directive('inner',function(){
    return{
        require : 'outer',
        template : '<div><h1>i am a inner</h1></div>',
        link:function(scope,elem,attr){

        }
    }
});

Vous pouvez le faire, mais quel est le problème?
Vous devez utiliser la transclusion. docs.angularjs.org/api/ng/directive/ngTransclude
Oui bien-sûr, nous pouvons le faire dans angulaire, je veux savoir pourquoi on n'a pas de travail pour moi. Est-il quelque chose de mal dans le code. J'ai essayé transclude de vrai. Il n'a pas travaillé.
quelles erreurs avez-vous?
je ne reçois pas toutes les erreurs. Il que le rendu extérieur de la directive. Je veux le rendre à l'extérieur et l'intérieur de la directive genre de nidification. Vérifier mon code.

InformationsquelleAutor sajan | 2014-12-28

45

D'abord ajouter restrict:'E' à l'intérieur du contrôleur pour le rendre accessible comme un élément.

Puis changer le require : 'outer' en require : '^outer', pour permettre à la recherche de cette directive dans les parents.

Alors vous devez utiliser transclude pour activer le contenu de la <outer> être considéré, par les étapes suivantes:
1. ajouter transclude = true à l'extérieur de la directive.
2. définir où vous voulez à l'intérieur de visualiser les données. (Je suppose que vous avez besoin d'apparaître à la fois le "je suis à l'extérieur" de la chaîne de sorte que vous pouvez modifier le modèle de celui de l'extérieur comme cela template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>').
Alors vous n'avez pas besoin de le compiler tout de paramètre.
Comme cette variable qui appelle outercontrol ne sera pas appelé à l'extérieur de la directive, mais à l'intérieur, la directive n'est donc pas besoin de le compiler à l'extérieur de la directive et à l'intérieure de la fonction de lien sera modifié pour être comme ceci:
```
link: function(scope, elem, attr, outercontrol){
    outercontrol.addItem(1);
}
```
après tout, cette modification du code final sera comme suit:

la HTML:
```
<outer>
    <inner></inner>
</outer>
```
la js:
```
var app = angular.module("exampleApp",[]);
    app.directive('outer', function(){
        return{
            transclude:true,
            restrict:'E',
            template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>',
            controller : function($scope){
                this.addItem = function(val){
                    console.log(val);
                }
            }
        }
    });

    app.directive('inner',function(){
        return{
            restrict:'E',
            require : '^outer',
            template : '<div><h1>i am a inner</h1></div>',
            link:function(scope,elem,attr,outercontrol){
                outercontrol.addItem(1);
            }
        }
    });
```
- C'est exactement ce que je veux. Merci beaucoup les gars (Y).
- Vous devez accepter sa réponse, cela a été très utile!
- Ahmed, j'ai un problème: À l'extérieur de la directive, je suis en utilisant le Remplacer: c'est vrai, mais il ne fonctionne pas.. Comment puis-je le résoudre? Thnak vous
InformationsquelleAutor Mostafa Ahmed

Si vous voulez une solution simple, découvrez cette plunkr.

JS:

var app = angular.module('app',[]);

app.directive('outer', function() {
    return {
        restrict: 'E',
        template: '<div style="border-style:solid"><h1>hey</h1><inner></inner></div>',
    }
});

app.directive('inner', function() {
    return {
        restrict: 'E',
        template: '<div style="border-style:solid"><h1>i am an inner</h1></div>',
    }
});

HTML:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<div ng-app="app">
  <outer></outer>
</div>

Le problème, c'est que vous êtes à la destruction de la balise avec l'attribut de modèle de la directive. Cette ligne:

    template:'<div><h1>i am a outer</h1></div>',

Fait.

Je ne veux pas de nid de mes directives telles que votre code. Je veux quelque chose comme cela "<extérieur><intérieur></intérieur></extérieur>".
Salut Pierre, votre code m'aide beaucoup!
Ce n'est pas modulaire et c'est une sorte de contre le point de l'utilisation de directives.. vous pouvez mettre toute votre logique dans une directive.

InformationsquelleAutor Peter Ashwell

Vous devez vous connecter pour publier un commentaire.