Question

122

AngularJS : Watch element.html() in a directive

rated 0 times [ 126] [ 4] / answers: 1 / hits: 17913 / 11 Years ago, thu, may 16, 2013, 12:00:00

I am looking to create a mardown directive (restrict A) which would make me able to use same recipient for ng-view. So I would basically load only .md files in views and apply my function on its content each time ng-view change. So :

index.html

<div markdown ng-view></div>

with two views containing, let say, view1.md

#That should be h1

and view2.md

##That should be h2, no ?

My actual code is

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

        }

    }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryantc

Add To Favorites

Follow

Total Points: 455

Total Questions: 96

Total Answers: 110

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

bryantc questions

1 How to fix TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')

Tue, Dec 7, 21, 00:00, 3 Years ago

1 NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

Fri, Aug 13, 21, 00:00, 3 Years ago

1 using react router with next.js

Tue, Mar 30, 21, 00:00, 3 Years ago

1 Notification system using socket.io

Fri, Jun 5, 20, 00:00, 4 Years ago

1 prisma2: how to fetch nested fields?

Wed, May 27, 20, 00:00, 4 Years ago

View All

answered 11 Years ago madelyn · Accepted Answer

The first param of watch can be a function, return any value you want including your $element.html(). You can even do a combination of data

$scope.$watch(

    function() { return $element.attr(abc) + $scope.variable + someinternalvar; },

    function(newVal, oldVal) { doTheStuff(); }

);

Obviously the more intense the data you put in here the slower your watches will be. Use caution.

-- FYI

You should clean up your watchers, create an array and push the results of $scope.$watch into that array. Then on the $destroy message remove them. Also remember to unbind events as they will cause eventual performance issues as scopes are created & destroyed.

$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

Just to add, cleaning up scope watchers is not needed as they are already processed internally, however rootScope, parent, etc. you should absolutely cleanup.