PonteIneptique PonteIneptique - 1 year ago 67
Javascript Question

AngularJS : Watch element.html() in a directive

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 :


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

var htmlText = converter.makeHtml(element.text());

Answer Source

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

    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.