Почему мой файл Javascript не загружается в html после того, как я использую $ sce.trustAsHtml ("<div id = 'boo'> </div>"); - PullRequest
Новая
       22

Почему мой файл Javascript не загружается в html после того, как я использую $ sce.trustAsHtml ("<div id = 'boo'> </div>");

0 голосов
/ 23 июня 2019

Я пытаюсь загрузить Vexflow SheetMusic в Div Динамически через Angularja ng-bind-html с $sce.trustAsHtml("<div id='boo'></div>"). Это работает с $sce.trustAsHtml("<p>Hello World</p>"). Помещение <div id='boo'></div> в тело страницы работает также. Он не будет загружать ноты в div с помощью ng-bind-html с $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 ]

0 голосов
/ 24 июня 2019

Это работает сейчас.У меня были свои ошибки.Спасибо за помощь 

<!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>
0 голосов
/ 23 июня 2019

Я бы хотел, чтобы файл JS загружался после углового.

Для кода, прикрепленного к элементу, используйте пользовательскую директиву: 

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);
        //...
    }
});

Использование 

<div boo-directive></div>

Когда платформа AngularJS компилирует DOM, она вызывает функцию связывания любых прикрепленных директив.

Примечание: ng-bind-html не компилирует добавленный DOM.Однако основные директивы, такие как ng-include, ng-view, ng-repeat, ng-if и т. Д., Компилируют шаблоны перед добавлением их в DOM.

Для получения дополнительной информации см.

...