AngularJS directive afin de les analyser et de les remplacer personnalisé élément de contenu

Je voudrais créer un simple démarque de la directive qui accepte à certains contenus à l'intérieur de l'élément, l'analyse et la remplace par html.

Donc:

<markdown>#Heading</markdown>

ou ce (où $champ d'application.titre = '#Titre';)

<markdown>{{heading}}</markdown>

Devient:

<h1>Heading</h1>

Mon directive (évidemment pas complète!):

.directive('markdown', function () {
    return {
        restrict: 'E',
        replace: true,
        link: function ($scope, $element, $attrs) {
            //Grab contents
                var contents = /* How do I do this? */

                var newContents = Markdowner.transform(contents);

                //Replace <markdown> element with newContents
                /* How do I do this? */
        }
    }
})

Je ne suis pas sûr de la façon de saisir le contenu de la directive? Aurais-je besoin de le compiler?!

Analyse Markdown est juste un exemple

Que diriez -ng-transclude? (docs.angularjs.org/api/ng.directive:ngTransclude)
Pouvez-vous utiliser transclude avec pas de modèle?
Non, vous avez besoin d'au moins une ligne (je pense que cela devrait le faire template: '<h1 ng-transclude></h1>')
Transclude ressemble à ce que je cherche mais impossible de le faire fonctionner. Pourriez-vous ajouter une réponse et de "combler les vides" dans la question ci-dessus?? Merci
La raison pour laquelle vous faites cela parce que vous voulez avoir démarque avec d'autres éléments personnalisés? Je suis aussi en train d'essayer quelque chose de similaire où j'ai besoin d'avoir le bouton radio de contrôle et de zone de texte avec le contenu. Je pense suivre la même structure. est-il recommandé?

OriginalL'auteur Greg | 2014-01-06

  1. 7

    Ici vous allez!

    Travail De Démonstration

    app.directive('markdown', function() {
  return {
    restrict: 'E',
    transclude: true,
    compile: function(elem) {
      elem.replaceWith(Markdowner.transform(elem.html()));
    }
  }
});
    S'avère que cette approche est obsolète dans angulaire 1.2. ;(
    Quelle partie est obsolète? Serait-ce une solution acceptable basé sur le vôtre? plnkr.co/modifier/44nAgaudUPCkd2Cw3hdp?p=preview
    Yep. La mise à jour de ma réponse. Merci.

    OriginalL'auteur jessegavin

  2. 6

    ngTransclude est spécialement conçue pour cela.

    myModule.directive('heading', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: true,
        template: '<h1 ng-transclude></h1>'
    };
}

    Puis l'utiliser comme ceci:

    <heading><span>{{foo}}</span></heading>

    Voici un travail violon (angulaire 1.2.7).

    Aussi, je devine que vous besoin d'une sorte de markdown intégration. Voici une version à l'aide de transclude de sorte que vous vous retrouvez avec un div conteneur.

    Cette une ignore tout transclude comportement et je devine que c'est plus proche de ce que vous êtes après.

    Je pense que Sergiu est sur la bonne voie (bien que le dernier exemple ne fonctionne pas avec les fixations) - j'ai fourchue son dernier échantillon et a ajouté une fonction pour traiter les liaisons. jsfiddle.net/edeustace/4rE85/1
    Bonne réflexion, c'est beaucoup plus utile avec les liaisons.

    OriginalL'auteur Sergiu Paraschiv

  3. 3

    Vous pouvez obtenir et définir les compilées contenu de l'élément dans la fonction de lien à l'aide de: 

    element.html() //get
element.html("blah") //set

    Voici un exemple basé sur Sergiu l'exemple ci-dessous qui traite les liaisons contenues dans le code html en utilisant scope.$eval(), avant d'appeler la démarque converter:

    http://jsfiddle.net/edeustace/4rE85/1/

    angular.module('transclude', [])
 .directive('markdown', function() {

  var regex = /\{\{(.*?)\}\}/;

  var converter = new Showdown.converter();

  return {
    restrict: 'E',
    replace: true,
    scope: true,
    link: function (scope, element) {

      var processTemplate = function(text){
        var results = text.match(regex);
        if(!results){
          return text;
        } else {
          var value = scope.$eval(results[1]);
          var replaceKey = new RegExp("{{" + results[1] + "}}","g");
            text = text.replace(replaceKey, value);
            return processTemplate(text);
        }
     };
     var text = element.text();
     var processed = processTemplate(text);
     var markdownText = converter.makeHtml(processed);
     element.html(markdownText);
    }

  };
});

    qui va travailler avec: 

    <markdown>
# Bar {{foo}} {{foo}}
# {{bing}}
</markdown>

    Ou vous pouvez le lier à un attribut que vous pouvez ensuite utiliser dans votre directive:

    app.directive('markdownWithBinding', function () {

  var converter = new Showdown.converter();

  return {
    restrict: 'E',
    scope: {
      'md' : '@'
    },
    link: function  ($scope, $element, $attrs) {

      $scope.$watch('md', function(newMd){

        var markdownText = converter.makeHtml(newMd);
        element.html(markdownText);

      });
    }
  }
});

    Utilisé comme: 

    <markdown-with-binding md="Hello {{name}}"></markdown-with-binding> 
<!-- outputs Hello World!!! -->

    Vieille Réponse

    Ce qui va se passer dans le lien() qui est destiné à la liaison de la portée de l'élément. Pour les changements structurels où aucune portée est nécessaire, il peut être préférable de faire vos modifications dans la compilation de la fonction: 

    app.directive('markdown', function () {

var link = function ($scope, $element, $attrs) {};
return {
    restrict: 'E',
    replace: true,
  compile: function($element, $attrs, $transclude){

    if($element.html() == "#Hello"){
      $element.html("<h1>Hello</h1>");
    }
    return link;
  },
}

    });

    Voici un excellent tutoriel sur les composants: http://www.youtube.com/watch?v=A6wq16Ow5Ec

    J'ai édité la question et a ajouté des commentaires du code. Serait-ce la poignée <markdown>{{heading}}</markdown> ?
    ajout de mise à jour sur la liaison de liaison pour le balisage de contenu que vous l'avez ici ne peut pas être fait en dehors de la boîte, mais je suis sûr que c'est réalisable.

    OriginalL'auteur ed.

  4. 0

    Sur votre lien de fonction, AngularJS déjà analysé votre HTML et remplacer le contenu par votre modèle (ce qui dans votre cas est manquant, puisque vous avez "remplacer" la valeur true).

    Vous pouvez vous saisir de l'intérieur le contenu html de l' $element, qui est un jQuery (jQLite) de l'élément.

    var contents = $element.innerHTML;

    OriginalL'auteur Jonas