Does not render upon AngularJS Updates about mermaid HOT 6 CLOSED

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/

from mermaid.

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.

from mermaid.

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.

from mermaid.

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?

from mermaid.

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

from mermaid.

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 [email protected]:

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.

from mermaid.