gpt4 book ai didi

javascript - 从生成的 url 加载图表

转载 作者:行者123 更新时间:2023-11-30 15:30:46 26 4
gpt4 key购买 nike

我想构建一个在线 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);
}]
}
})

然而,上面的代码只显示了字符串而不是图形:

enter image description here

此外,它嵌入在 <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 代码包含 htmlbody 标签,我不确定会发生什么。也许您需要删除它们。

关于javascript - 从生成的 url 加载图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42272594/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com