我想构建一个在线 html/css/javascript Playground 。当代码绘制图形时，我希望能够生成一个 url，用户可以使用该 url 在浏览器中加载该图形。
目前，在 Playground 上，我有一个链接到函数 generateUrl 的按钮:
$scope.generateUrl = function () {
urls.create({
// allCode is a string like "<html><body><canvas ...>...</canvas><script>...</script></html>"
content: $scope.allCode
}).success(function (url) {
alert(url._id)
});
};
然后，我想加载像 localhost:3000/urls/58a56d0962bd39979d142e27 这样的 url 的 id在浏览器中:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('urls', {
url: '/urls/{id}',
template: "{{url.content}}",
controller: 'UrlCtrl',
resolve: {
url: ['$stateParams', 'urls', function ($stateParams, urls) {
return urls.get($stateParams.id);
}]
}
})
然而，上面的代码只显示了字符串而不是图形:
此外，它嵌入在 <ui-view></ui-view> 中我的全局 index.ejs .该行为是预期的，但这不是我希望用户在加载时看到的 www.mysite.com/urls/58a56d0962bd39979d142e27 .
有谁知道如何设置从生成的 url 加载图表？
最佳答案
我相信您需要使用 Angular 的 Strict Contextual Escaping服务，更广为人知的是 $sce。
Strict Contextual Escaping (SCE) is a mode in which AngularJS requires bindings in certain contexts to result in a value that is marked as safe to use for that context. One example of such a context is binding arbitrary html controlled by the user via ng-bind-html. We refer to these contexts as privileged or SCE contexts.
因此，您可以使用 ngBindHtml 指令，而不是简单的插值。
<div ng-bind-html="url.content"></div>
或者，您也可以在 url 解析函数上注入(inject) $sce 并调用 trustAsHtml 方法:
resolve: {
url: ['$sce', '$stateParams', 'urls', function ($sce, $stateParams, urls) {
return $sce.trustAsHtml(urls.get($stateParams.id));
}]
}
如果您的 HTML 代码包含 html 和 body 标签，我不确定会发生什么。也许您需要删除它们。
关于javascript - 从生成的 url 加载图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42272594/