从生成的网址加载图形 [英] Load a graph from a generated url
问题描述
我想建立一个在线html/css/javascript游乐场.当代码绘制图形时，我希望能够生成一个URL，用户可以使用该URL在浏览器中加载此图形.
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.
此刻，在操场上，有一个链接到功能generateUrl的按钮:
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)
});
};
然后，我想在浏览器中加载像localhost:3000/urls/58a56d0962bd39979d142e27这样的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:
此外，它嵌入在我的全局index.ejs的<ui-view></ui-view>中.该行为是预期的，但这不是我希望用户加载www.mysite.com/urls/58a56d0962bd39979d142e27时看到的内容.
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?
推荐答案
我认为您需要使用Angular的严格的上下文转义服务，又称为$sce.
I believe that you need to use Angular's Strict Contextual Escaping service, more known as $sce.
严格上下文转义(SCE)是一种模式，其中AngularJS要求在某些上下文中进行绑定以产生一个值，该值被标记为可安全地用于该上下文.这种上下文的一个示例是通过ng-bind-html绑定由用户控制的任意html.我们将这些上下文称为特权或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指令，而不是普通插值.
So, you can either use the ngBindHtml directive, instead of plain interpolation.
<div ng-bind-html="url.content"></div>
或者，您也可以在url解析函数上注入$sce并调用trustAsHtml方法:
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));
}]
}
我不确定如果您的HTML代码包含html和body标签会发生什么.也许您需要删除这些内容.
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.
这篇关于从生成的网址加载图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
