问题描述
我想建立一个在线 html/css/javascript 游乐场.当代码绘制图形时,我希望能够生成一个 url,用户可以使用它在浏览器中加载此图形.
目前,在操场上,我有一个按钮链接到函数generateUrl
:
$scope.generateUrl = function () {urls.create({//allCode 是一个字符串,如
然后,我想在浏览器中加载像
localhost:3000/urls/58a56d0962bd39979d142e27
这样的 url id:
app.config(['$stateProvider', function ($stateProvider) {$stateProvider.state('网址', {url: '/urls/{id}',模板:{{url.content}}",控制器:'UrlCtrl',解决: {url: ['$stateParams', 'urls', 函数 ($stateParams, urls) {返回 urls.get($stateParams.id);}]}})
然而,上面的代码只显示了字符串而不是图形:
此外,它嵌入在我的全局
index.ejs
的 中.该行为是预期的,但这不是我希望用户在加载
www.mysite.com/urls/58a56d0962bd39979d142e27
时看到的内容.
有谁知道如何设置从生成的 url 加载图表?
解决方案
我相信你需要使用 Angular 的 严格的上下文转义服务,更多的称为
$sce
.
严格上下文转义 (SCE) 是一种模式,在这种模式下,AngularJS 需要在某些上下文中进行绑定,以生成标记为可安全用于该上下文的值.这种上下文的一个例子是绑定用户通过 ng-bind-html 控制的任意 html.我们将这些上下文称为特权或 SCE 上下文.
因此,您可以使用
ngBindHtml
指令,而不是简单的插值.
或者,你也可以在你的
url
解析函数上注入 $sce
并调用 trustAsHtml
方法:
解析:{url: ['$sce', '$stateParams', 'urls', 函数 ($sce, $stateParams, urls) {返回 $sce.trustAsHtml(urls.get($stateParams.id));}]}
如果您的 HTML 代码包含
html
和 body
标签,我不确定会发生什么.也许您需要删除它们.
I want to build an online html/css/javascript playground. When the code draws a graph, I want to be able to generate a url, with which users could load this graph in a browser.
At the moment, in the playground, I have a button that links to the function
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)
});
};
Then, I want to load with the id of a url like
localhost:3000/urls/58a56d0962bd39979d142e27
in a browser:
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);
}]
}
})
However, the above code just shows the string rather than the graph:
Additionally, it is embedded in
<ui-view></ui-view>
of my global index.ejs
. The behaviour is expected, but it is not what I want users to see when they load www.mysite.com/urls/58a56d0962bd39979d142e27
.
Does anyone know how to set up loading a graph from a generated url?
解决方案
I believe that you need to use Angular's Strict Contextual Escaping service, more known as
$sce
.
So, you can either use the
ngBindHtml
directive, instead of plain interpolation.
<div ng-bind-html="url.content"></div>
Or, you could also inject
$sce
on your url
resolve function and call trustAsHtml
method:
resolve: {
url: ['$sce', '$stateParams', 'urls', function ($sce, $stateParams, urls) {
return $sce.trustAsHtml(urls.get($stateParams.id));
}]
}
I'm not sure what's gonna happen if your HTML code contains the
html
and body
tags. Maybe you'll need to remove those.
这篇关于从生成的 url 加载图形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!