AngularJS Richtlinie zu analysieren und ersetzen Sie das custom-element Inhalt

Ich würde gerne eine einfache markdown-Richtlinie akzeptiert, dass einige Inhalte innerhalb des Elements, analysiert es und ersetzt es durch html.

So:

<markdown>#Heading</markdown>

oder diese (dem $scope.Rubrik = '#Position';)

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

Wird dies:

<h1>Heading</h1>

Meine Richtlinie bisher (natürlich nicht vollständig!):

.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? */
        }
    }
})

Ich bin mir nicht sicher, wie Sie greifen die Inhalte der Richtlinie? Würde ich brauchen, um es zu kompilieren?!

Parsen von Markdown ist nur ein Beispiel

Wie wäre ng-transclude? (docs.angularjs.org/api/ng.directive:ngTransclude)
Können Sie transclude ohne Vorlage?
Nein, Sie müssen mindestens ein inline one (ich denke, dies sollte es tun template: '<h1 ng-transclude></h1>')
Transclude klingt wie das, was ich bin nach, aber kann nicht scheinen, um es zu arbeiten. Könntest du eine Antwort und "fill in the blanks" in die oben genannte Frage?? Dank
Der Grund, warum Sie dies tun, ist, weil Sie wollen, um markdown-zusammen mit anderen benutzerdefinierten Elemente? Ich bin auch versucht, etwas ähnliches, wo brauche ich, um radio-button-Steuerelement und das Textfeld zusammen mit dem Inhalt. Ich denke, zu Folgen, die ähnliche Struktur. ist es empfehlenswert?

InformationsquelleAutor Greg | 2014-01-06

  1. 7

    Hier gehen Sie!

    Arbeiten Demo

    app.directive('markdown', function() {
  return {
    restrict: 'E',
    transclude: true,
    compile: function(elem) {
      elem.replaceWith(Markdowner.transform(elem.html()));
    }
  }
});
    Stellt sich heraus, dass dieser Ansatz veraltet ist, in eckige 1.2 obwohl. ;(
    Welcher Teil ist veraltet? Wäre dies eine akzeptable Lösung, basierend auf deinen? plnkr.co/Bearbeiten/44nAgaudUPCkd2Cw3hdp?p=Album Vorhören
    Yep. Die Aktualisierung meiner Antwort. Danke.

    InformationsquelleAutor jessegavin

  2. 6

    ngTransclude ist speziell für diese.

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

    Dann verwenden Sie es wie diese:

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

    Hier ist eine funktionierende fiddle (Winkel 1.2.7).

    Auch, ich vermute, Sie brauchen eine Art von markdown-integration. Hier eine version mit transclude, so dass Sie am Ende mit einem div container.

    Diese eine überspringt die ganze transclude Verhalten und ich vermute, es ist näher an, was Sie nach.

    Ich denke, Sergiu ist auf dem richtigen Weg (obwohl das Letzte Beispiel funktioniert nicht mit "Bindungen") - ich habe die Gabel seiner letzten Probe Hinzugefügt und eine Funktion zum verarbeiten der Bindungen. jsfiddle.net/edeustace/4rE85/1
    Gute denken, es ist viel mehr nützlich, mit Bindungen.

    InformationsquelleAutor Sergiu Paraschiv

  3. 3

    Können Sie get-und set-die kompilierten Inhalte des Elements in der link-Funktion verwenden: 

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

    Hier ist ein Beispiel, basierend auf Sergiu Beispiel unten, dass die Prozesse die Bindungen innerhalb der html scope.$eval() vor dem aufrufen der markdown-Konverter:

    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);
    }

  };
});

    die Arbeit mit: 

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

    Oder Sie können binden Sie es an ein Attribut, das Sie dann verwenden können, in Ihre Richtlinie:

    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);

      });
    }
  }
});

    Verwendet, etwa so: 

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

    Alte Antwort

    Dies geschieht in der Verbindung (), die für die Verknüpfung der Rahmen um das element. Für strukturelle Veränderungen, wo kein Rahmen erforderlich ist, sollten Sie vielleicht besser Ihre änderungen in der compile-Funktion: 

    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;
  },
}

    });

    Hier ist ein tolles tutorial auf Komponenten: http://www.youtube.com/watch?v=A6wq16Ow5Ec

    Ich habe bearbeitet die Frage und die Kommentare zum code. Würde dieser Griff <markdown>{{heading}}</markdown> ?
    Hinzugefügt update über die Bindung - die Bindung an die markup-Inhalte, wie Sie haben es hier nicht getan werden kann out of the box, aber ich bin mir sicher erreichbar ist.

    InformationsquelleAutor ed.

  4. 0

    Auf Ihren link-Funktion, AngularJS bereits analysiert Ihre HTML und ersetzt den Inhalt durch Ihre Vorlage (die in Ihrem Fall fehlt, da Sie "ersetzen" auf true gesetzt ist).

    Fassen Sie die innere html-Inhalt aus $element ein jQuery (jQLite) element.

    var contents = $element.innerHTML;

    InformationsquelleAutor Jonas

Schreibe einen Kommentar