AngularJS : Uhr element.html() in einer Richtlinie

Ich bin auf der Suche zum erstellen einer mardown Richtlinie (einschränken), die machen würde, mich zu benutzen denselben Empfänger für ng-view. Also ich würde grundsätzlich laden nur .md-Dateien in Ansichten und meine Funktion auf seine Inhalte jedes mal, wenn ng-view ändern. Also :

index.html

<div markdown ng-view></div>

mit zwei Ansichten mit, sagen wir, view1.md

#That should be h1

und ansicht2.md

##That should be h2, no ?

Meine eigentliche code ist 

'use strict';
angular.module('btford.markdown', []).
  directive('markdown', function () {
    var converter = new Showdown.converter();

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            scope.$watch(element.html(), function(value) {
                    var htmlText = converter.makeHtml(element.html());
                    element.html(htmlText);
            });

            var htmlText = converter.makeHtml(element.text());
            element.html(htmlText);
        }
    }
});
  • Was ist die Frage? Was nicht funktioniert?
  • Frage ist, wie kann ich verhindern, dass mein convert-Funktion auf den Inhalt angewendet wird geladen durch ng-view
InformationsquelleAutor PonteIneptique | 2013-05-16
  1. 3

    Den ersten Parameter der Uhr kann eine Funktion sein, wieder alle Wert, den Sie einschließlich Ihre $element.html(). Sie können sogar eine Kombination von Daten 

    $scope.$watch(
    function() { return $element.attr("abc") + $scope.variable + someinternalvar; },
    function(newVal, oldVal) { doTheStuff(); }
);

    Offensichtlich je intensiver die Daten, die Sie in setzen hier das langsamere Uhren werden. Vorsicht verwenden.

    -- FYI

    Sollten Sie reinigen Sie Ihren Beobachter, ein array erstellen und push die Ergebnisse von $scope.$Uhr in das array. Dann auf das $destroy-Nachricht entfernen. Denken Sie auch an eine Bindung, die Ereignisse, wie Sie bewirkt, dass eventuelle Leistungsprobleme als Bereiche erstellt werden, & zerstört.

    $document.bind('click', clickMe);
$(window).on("resize", winResize);

var watches = []

watches.push($scope.$watch("thing", function() { Thing(); }));

$scope.$on("$destroy", function () {
    for (var i in watches) watches[i]();
    $document.unbind('click', clickMe);
    $(window).off("resize", winResize);
});

    -- EDIT 2016-07-14

    Nur hinzufügen, Aufräumen Umfang watchers ist nicht erforderlich, da Sie bereits intern verarbeitet, jedoch rootScope, Eltern, etc. Sie sollten unbedingt Aufräumen.

    InformationsquelleAutor Vince
  2. 0

    Kann es sein, Reiniger für Sie zu verwenden, die $stateChangeSuccess Ereignis innerhalb Ihrer Richtlinie anstatt Ihre eigenen $sehen. Versuchen Sie eine callback-Funktion, die $stateChangeSuccess Ereignis, das sollte trickle-down auf den Umfang der Richtlinie.

    'use strict';

angular.module('btford.markdown', []).
  directive('markdown', function () {
    var converter = new Showdown.converter();

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            //When the state is change to, or reloaded...
            scope.$on('$stateChangeSuccess', function () {
                var htmlText = converter.makeHtml(element.text());
                element.html(htmlText);
            });
        }
    }
});
    InformationsquelleAutor f1lt3r
  3. -1

    Können Sie nur beobachten von Variablen auf Ihrem Umfang.

    scope.foo = 'bar';
scope.$watch('foo', function(newValue) {
  //Code to execute here
});

    Wenn Sie wollen, überwachen Sie die änderungen des DOM-Elemente, die Sie brauchen, um dies zu tun auf Ihrem eigenen.

    • Ich möchte zum überwachen der änderung durch die ng-view, um den Inhalt meiner mardown element.
    • Eigentlich bedeutet das, wir schauen die Weg... Also ich muss in der Lage sein, zu beobachten route in meinem Richtlinie
    • Kleine Korrektur, du kannst Sie nicht nur beobachten, Bereich Attribute nach Ihren Beispiel, aber auch keine Funktion der Ausgang (scope.$watch(someFunc, function(newVal, oldVal) {});).
    • So... diese Antwort ist NICHT korrekt. Wie Anton gesagt und ich habe es gerade getestet, die Sie tun können, `scope.$Uhr(function(){ return element.html(); }, function(newVal, oldVal){ /* Code hier */ }); und Ihre Funktion wird aufgerufen, wenn es eine änderung in der für das element html.
    InformationsquelleAutor TheHippo
Schreibe einen Kommentar