Comments (6)
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.
Related Issues (20)
- SVG rendering formatting issues with markdown input
- [BUG] Using `constructor` as node ID results in errors HOT 1
- Vite build error with mermaid version 10.9.0
- Syntax error in text mermaid version 10.9.0
- Support a dialogue diagram HOT 1
- Class diagram: static abstract method does not work HOT 1
- adding Markdown to SequenceDiagram Notes
- sankey with showValues enabled results in unnecessary crossing of lines
- Please modify the mindmap style. HOT 2
- Allow user to disable setting of certain CSS styles
- YouTube `<iFrame>` doesn't render. HOT 2
- nested block diagram's dynamic width not worked as expected
- Misleading doc statement about state diagram?
- mermaid.ink server is down HOT 1
- Named composite example in State Diagram HOT 1
- Image not rendering in mermaid live HOT 1
- KaTeX does not render on GitHub HOT 3
- Tag a commit separate from the line defining the commit in gitGraph HOT 1
- Add support for nested namespaces
- The diagram renders only once. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mermaid.