Accès au texte de la directive angulaire (élément) à l'intérieur du modèle

Donc je suis cette tête d'oeuf.io tutoriel sur des composants personnalisés, et je suis tombé sur ce problème. Lors de la déclaration d'une directive comme:

angular.module('myApp', [])
    .directive('myDir', function(){
        return {
            restrict: "E",
            controller: "myController",
            link: function(scope, element, attrs) {
                scope.foo = element.text();
            },
            templateUrl: "myDirTemplate.html"
        }
    });

et le Modèle:

<div>The value is: {{foo}}</div>

et la directive être utilisé comme suit:

<html>
...
<myDir>Bar</myDir> 
...
</html>

élément dans le fonction de lien se réfère à la

<div>The value is: {{foo}}</div>

dans le modèle. Si je ne spécifie pas le templateUrlpuis élément se réfère à la

<myDir>Bar</myDir>

dans la vue principale, qui est ce que je veux. J'espérais que la directive devrait prendre la "Barre" du texte et l'insérer dans le {{foo}}, donnant le résultat final de:

<div>The value is: Bar</div>

Mais je ne sais pas comment se déplacer angulaire sélectionnant le modèle de l'élément à chaque fois.

Des idées?

source d'informationauteur Rex T

  1. 22

    Vous devez utiliser ngTransclude:

    app.directive('myDir', function(){
  return {
    restrict: "E",
    transclude: true,
    templateUrl: "myDirTemplate.html",
    replace: true
  }
});

    et puis votre modèle devient quelque chose de similaire à:

    <div>The value is: <span ng-transclude></span></div>

    Afficher le code de travail ici: http://plnkr.co/edit/EuT5UlgyxgM8d54pTpOr?p=preview