Why does my Javascript File not load into html after I use $sce.trustAsHtml(“<div id='boo'></div>”);
Question
I am trying to load Vexflow sheetmusic into Div Dynamically through angularja ng-bind-html with $sce.trustAsHtml("<div id='boo'></div>") . This Works With $sce.trustAsHtml("<p>Hello World</p>") . Putting <div id='boo'></div> in body of page works also. It will not load sheet music into div with ng-bind-html with $sce.trustAsHtml("<div id='boo'></div>") .
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9 /angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<script src="https://unpkg.com/vexflow/releases/vexflow-debug.js"> </script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-bind-html="html"></div>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope, $sce) {
$scope.html = $sce.trustAsHtml("<div id='boo'></div>");
});
id = "boo";
len =window.innerWidth/2;
VF = Vex.Flow;
// Create an SVG renderer and attach it to the DIV element named "boo".
var div = document.getElementById(id);
var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
// Size our svg:
renderer.resize(window.innerWidth/2 , 200);
// And get a drawing context:
var context = renderer.getContext();
// Create a stave at position 0, 40 of width of 'len' on the canvas.
var stave = new VF.Stave(0, 40, len);
// Add a clef and time signature.
stave.addClef("treble").addTimeSignature("4/4");
// Connect it to the rendering context and draw!
stave.setContext(context).draw();
</script>
</body>
</html>
2 answers
solution1
0 2019-06-23 19:30:25
I would like the JS file to load after angular.
For code attached to an element, use a custom directive:
app.directive("booDirective", function() {
return {
link: postLink
};
function postLink(scope,elem,attrs) {
var div = elem[0];
var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
//...
}
});
Usage
<div boo-directive></div>
When the AngularJS framework compiles DOM, it invokes the link function of any attached directives.
Note: The ng-bind-html does not compile added DOM. However core directives such as ng-include , ng-view , ng-repeat , ng-if , etc. compile templates before adding them to the DOM.
For more information, see
solution2
0 2019-06-24 18:00:52
This works now. I had my own errors. Thanks for help
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<script src="https://unpkg.com/vexflow/releases/vexflow-debug.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div boo-directive></div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
});
app.directive("booDirective", function() {
return {
link: postLink
};
function postLink(scope,elem,attrs) {
var len =window.innerWidth/2;
var VF = Vex.Flow;
var div = elem[0];
var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
// Size our svg:
renderer.resize(window.innerWidth/2 , 200);
// And get a drawing context:
var context = renderer.getContext();
// Create a stave at position 0, 40 of width of 'len' on the canvas.
var stave = new VF.Stave(0, 40, len);
// Add a clef and time signature.
stave.addClef("treble").addTimeSignature("4/4");
// Connect it to the rendering context and draw!
stave.setContext(context).draw();
}
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.