使用$sce.trustAsHtml("<div id=‘boo’></div>“)后，为什么我的Javascript文件不能加载到html中？
使用$sce.trustAsHtml("<div id=‘boo’></div>“)后，为什么我的Javascript文件不能加载到html中？
提问于 2019-06-23 22:06:02
我正在尝试用$sce.trustAsHtml("<div id='boo'></div>")通过angularja ng-bind-html将Vexflow sheetmusic动态加载到Div中。这适用于$sce.trustAsHtml("<p>Hello World</p>")。将<div id='boo'></div>放在页面主体中也是有效的。它不会使用带有$sce.trustAsHtml("<div id='boo'></div>")的ng-bind-html将乐谱加载到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
Stack Overflow用户
发布于 2019-06-24 03:30:26
我希望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之前会对其进行编译。
有关详细信息，请参阅
Stack Overflow用户
发布于 2019-06-25 02:00:53
这现在起作用了。我也有自己的错误。感谢你的帮助
<!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> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56724649
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号