0

我正在尝试通过 angularja 将 Vexflow sheetmusic 动态加载到 Divng-bind-html中$sce.trustAsHtml("<div id='boo'></div>")。这适用于$sce.trustAsHtml("<p>Hello World</p>"). 放入<div id='boo'></div>页面正文也可以。它不会将乐谱加载到带有 ng-bind-html 的 div 中$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>
4

2 回答 2

0

这现在有效。我有自己的错误。感谢帮助

<!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>
于 2019-06-24T18:00:52.883 回答
0

我希望 JS 文件在 angular 之后加载。

对于附加到元素的代码，请使用自定义指令：

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 之前对其进行编译。

有关详细信息，请参阅

于 2019-06-23T19:30:25.660 回答