AngularJS : Regarder element.html() dans une directive

Je suis à la recherche pour créer un mardown directive (restreindre) qui me ferait mesure d'utiliser le même destinataire pour ng-view. Je voudrais donc essentiellement de charge seulement .md fichiers dans les vues et les appliquer ma fonction de son contenu à chaque fois ng-modification de l'affichage. Donc :

index.html

<div markdown ng-view></div>

avec deux vues contenant, disons, vue1.md

#That should be h1

et vue2.md

##That should be h2, no ?

Mon code est 

'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);
        }
    }
});
  • Quelle est la question? Ce qui ne fonctionne pas?
  • La Question est de savoir comment dois-je garder ma fonction de conversion appliqué au contenu chargé par ng-view
InformationsquelleAutor PonteIneptique | 2013-05-16
  1. 3

    Le premier paramètre de la montre peut être une fonction, de retour de valeur que vous souhaitez, y compris votre $element.html(). Vous pouvez même faire une combinaison de données 

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

    Évidemment le plus intense les données que vous mettez ici le ralentissement de votre montres seront. A utiliser avec précaution.

    -- Pour info

    Vous devriez nettoyer votre watchers, créer un tableau et de pousser les résultats de $scope.$regarder dans ce tableau. Puis sur la somme de détruire message de les supprimer. Aussi n'oubliez pas de séparer les événements qu'ils vont provoquer des éventuels problèmes de performances que des champs sont créés & détruit.

    $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

    Juste pour ajouter, le nettoyage de la portée des observateurs n'est pas nécessaire, car ils sont déjà traitées en interne, cependant rootScope, parent, etc. vous devez absolument nettoyer.

    InformationsquelleAutor Vince
  2. 0

    Il peut être plus propre pour vous d'utiliser le $stateChangeSuccess événement à l'intérieur de votre directive plutôt que de fixer vos propres $watch. Essayez d'ajouter une fonction de rappel à la $stateChangeSuccess cas, cela devrait descendre à la portée de votre directive.

    '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

    Vous pouvez seulement regarder les variables de votre portée.

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

    Si vous voulez suivre l'évolution des éléments du DOM, vous devez le faire sur votre propre.

    • Je veux surveiller les changements effectués par ng-afficher le contenu de mon mardown élément.
    • En fait cela signifie que de regarder la route... Donc j'ai besoin d'être en mesure de regarder la route dans mon directive
    • Correction mineure, vous pouvez non seulement regarder la portée des attributs, comme par votre exemple, mais aussi toute la fonction de sortie (scope.$watch(someFunc, function(newVal, oldVal) {});).
    • Alors... cette réponse n'est PAS correcte. Anton a dit, et je l'ai juste testé, vous pouvez le faire " scope.$regarder(function(){ return element.html(); }, function(newVal, oldVal){ /* Code */ }); et votre fonction sera appelée à chaque fois qu'il ya un changement dans l'élément html.
    InformationsquelleAutor TheHippo