Why does my Javascript File not load into html after I use $sce.trustAsHtml("<div id='boo'></div>");

Question

Why does my Javascript File not load into html after I use $sce.trustAsHtml("<div id='boo'></div>");

125 Views Asked by John Pull At 25 April 2025 at 20:48

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>

Original Q&A

There are 2 best solutions below

**John Pull** · Answer 1

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>

**georgeawg** · Answer 2

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

AngularJS Developer Guide - Creating Custom Directives

Why does my Javascript File not load into html after I use $sce.trustAsHtml("<div id='boo'></div>");

There are 2 best solutions below

Usage

Related Questions in ANGULARJS

Related Questions in VEXFLOW

Trending Questions

Popular # Hahtags

Popular Questions