Does not render upon AngularJS Updates

[kmader]

I am trying to make a tool that builds up graphs using AngularJS

    $scope.graphScript = "graph TD; "

    $scope.addToRun = function(s) {
        $scope.graphScript+=" Img-->"+s.name+"; ";
    };

which is then rendered in

<div class="mermaid">{{graphScript}}</div>

The problem is this does not render it just displays as text
graph TD; Img-->Neighbors; Img-->Filter; is there a way to manually force mermaid to render again? Or perhaps a better way entirely for making the graphs?

When run from the js console mermaid.init(); will force the graph to render but afterwards it can't be updated anymore.

[knsv]

This sounds like it could have to do with the built in cross site scripting defence in angularjs. Look at how to sanitize html in angularjs. Basically you need to tag your html code as trusted for it to render as html and not text.

[kmader]

So I tried that, making the DI changes and then the following in the controller

$scope.getGraph = function() {
        return $sce.trustAsHtml($scope.graphScript);
    }

and partial
<div class="mermaid" ng-bind-html="getGraph()"></div>
The graph still does not render without mermaid.init();, it will however update by running mermaid.init(); whereas the last version did not.

[knsv]

Thats good to hear!

I suspect this is due some timing issue. The "built-in" call to looks for elements to render is triggered on page load but in this case I am guessing the graph text is not there at that time which is why you need to trigger it by yourself. Can can run init several times without problems though so if it by chance would have rendered already the second init call will not break anything. Ok to close this one?

[kmader]

Well the final solution I came up with (since running mermaid.init multiple times doesn't work) is a bit hacky and runs on a delay after the string is updated.

$scope.addToRun = function(s) {
        $scope.graphScript+=" Img-->"+s.name+"; ";
        setTimeout(function(){mermaid.init();},1000)
    };

I guess this is more of an issue with the angular approach than mermaid itself though, so you can close the issue, if you'd like

[kmader]

I created a repository (https://github.com/kmader/angular-mermaid-js) showing how to integrate them properly with a demo
http://kmader.github.io/angular-mermaid-js/

[knsv]

That's great! I'm sure this will be helpful for many.

/Knut

Skickat från min iPad

16 dec 2014 kl. 18:11 skrev Kevin Mader notifications@github.com:

I created a repository (https://github.com/kmader/angular-mermaid-js) showing how to integrate them properly with a demo
http://kmader.github.io/angular-mermaid-js/

—
Reply to this email directly or view it on GitHub.