Directive AngularJS similaire à l'assistant de rails

Question

Je suis un ngNoob quand il s'agit de angular, juste commencé à l'utiliser. Je viens de rails et j'adore vraiment une fonctionnalité qui est l'aide aux rails. En fait, je peux faire quelque chose comme ceci:

<%= my_helper param1: "some value", param2: "some other value" do %> 
    <div> 
    This is some html that will get wrapped in html defined in the helper. 
    </div> 
<% end %> 

L'assistant appelé my_helper serait tout simplement capturer l'&block et le mettre dans un certain HTML supplémentaire et résoudrait à quelque chose comme ceci:

<div class="added-by-helper" data-params="some params from my helper"> 
    <span>Added by my_helper</span> 
    <div> 
    This is some html that will get wrapped in html defined in the helper. 
    </div> 
    <span>Other content from my_helper...</span> 
</div> 

Je suis assez Bien sûr, cela peut être fait en angulaire, mais je ne peux pas comprendre comment. J'ai lu quelque part que $transclude pourrait aider, mais je ne peux pas comprendre comment faire cela.

Comment cela peut-il être fait dans angularjs?

Answer 1

Vous avez absolument raison de dire que c'est ce que transclude.

est ici d'une simple directive qui ajoute un contenu:

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

app.directive('exampleDirective', function() { 
    return { 
     transclude: true, 
     restrict: 'EA', 
     template: '<div class="added-by-helper"><p>Added by helper</p><div ng-transclude></div></div>', 
     replace: true 
    }; 
}); 

Ils élément clé est la directive ng-transclude sur la div intérieure dans le modèle, il est l'espace réservé où le contenu déjà défini sera placé.

est ici le point de vue:

<example-directive> 
    <p>extra content</p> 
</example-directive> 

et rend comme ceci:

<div class="added-by-helper"> 
    <p>Added by helper</p> 
    <div ng-transclude=""> 
     <p class="ng-scope">extra content</p> 
    </div> 
</div> 

Ne hésitez pas à jouer sur plunker;