2013-06-08 18 views
1

J'ai un ensemble d'éléments dom qui doit être modifié en bloc. Dans l'exemple suivant, la directive "block" va ajouter un lien d'édition à l'intérieur de celle-ci.comment faire une directive modifier le contenu d'une autre directive?

<div block> 
    <div editable="text1">this is editable</div> 
    <div editable="text2">this is another editable</div> 
</div> 

Je veux le lien modifier pour remplir une autre directive (appelée « panel »), avec un champ d'entrée pour chaque élément modifiable à l'intérieur du bloc. Bien sûr, les champs de saisie doivent se lier aux éléments dom ci-dessus. Les blocs peuvent être placés dinamycally à l'intérieur de ng-switch et/ou ng-repeat, donc j'ai besoin de considérer les différents niveaux de portée.

La question spécifique est comment puis-je faire une directive modifier le contenu d'une autre directive? J'ai seulement trouvé des exemples sur comment faire communiquer deux directives lorsqu'elles sont attachées au même élément. Pour le moment, j'essaie d'utiliser jQuery à l'intérieur de la fonction de liaison de la directive "block" pour obtenir une liste des éléments éditables et les afficher dans le "panel" en utilisant une propriété de contrôleur, mais je ne peux pas Ne le faites pas fonctionner pour ng-repeat/ng-switch.

Si possible, une suggestion générale sur la façon d'aborder ce problème dans AngularJS est vraiment appréciée !!

Merci

+0

Bien sûr, la question (au moins la question spécifique) est uniquement liée à la façon de faire apparaître les champs de saisie. Le contenu modifiable est géré par un modèle et est déjà lié à la directive editable. J'ai juste besoin de créer les champs pour l'éditer dans le panneau. –

+0

Je suis curieux de savoir ce que la directive block/panel est censée faire, en particulier. A-t-il des données ou des propriétés? Si elle n'a que l'affichage, pourquoi ne pas simplement avoir une classe css "bloquée"? Nous pourrions probablement mieux répondre si vous donnez un exemple de ce que vous essayez de faire ou de ce que vous avez fait, même si c'est en train de se casser; utiliser jsfiddle ou plunker ou quelque chose et mettre à jour votre question s'il vous plaît. –

+0

Le panneau doit afficher des champs d'entrée pour chacun des éléments modifiables dans la directive de bloc. Cependant, j'ai résolu de lire ceci [bonne réponse] (http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs) –

Répondre

0

j'avais avant la même question et ont Fiddle example, pour appeler la directive de la directive. Peut-être que ça va t'aider.

HTML

<div ng-controller="MyCtrl"> 
    <div directive-foo></div> 
</div> 

JS

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

app.directive('directiveFoo', function() { 
return { 
    template: '<div directive-bar="123">bar</div>', 
    replace: true, 
    controller: function() { 
     console.log('in foo ctrl'); 
     this.isFooAlive = function() { 
      return 'Foo is alive and well'; 
     } 
    } 
    } 
}); 
app.directive('directiveBar', function() { 
    return { 
    controller: function() { 
     console.log('in bar ctrl'); 
    }, 
    require: 'directiveFoo', 
    link: function(scope, element, attrs, fooCtrl) { 
     console.log(fooCtrl.isFooAlive()); 
    } 
    } 
}); 

function MyCtrl($scope) { 
} 
+1

sont imbriqués directives, j'avais besoin de communiquer entre deux directives complètement séparées. –

0

J'utilise un tableau de portée du contrôleur pour contenir les données des champs en cours de modification dans le panneau, et le problème est que J'essayais de vider le tableau en utilisant scope.myarray = [] qui créait un nouveau tableau dans la portée enfant.

Questions connexes