Javascript 从生成的url加载图形_Javascript_Html_Canvas_Angular Ui Router_Angular Ui Router Extras

Javascript 从生成的url加载图形

javascript html canvas

Javascript 从生成的url加载图形,javascript,html,canvas,angular-ui-router,angular-ui-router-extras,Javascript,Html,Canvas,Angular Ui Router,Angular Ui Router Extras,我想建立一个在线html/css/javascript操场。当代码绘制图形时，我希望能够生成一个url，用户可以使用该url在浏览器中加载此图形目前，在操场上，我有一个按钮，链接到功能generateUrl： $scope.generateUrl = function () { urls.create({ // allCode is a string like "<html><body><canvas ...>...</canv

我想建立一个在线html/css/javascript操场。当代码绘制图形时，我希望能够生成一个url，用户可以使用该url在浏览器中加载此图形

目前，在操场上，我有一个按钮，链接到功能

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)
    });
};

但是，上面的代码只是显示字符串，而不是图形：

此外，它还嵌入到我的全局

索引.ejs的
中。这种行为是预期的，但我不希望用户在加载www.mysite.com/url/58a56d0962bd3979d142e27
时看到
有人知道如何设置从生成的url加载图形吗？
我认为您需要使用Angular的服务，即$sce

严格上下文转义（SCE）是一种模式，在这种模式下，AngularJS需要在特定上下文中绑定，以生成标记为可安全用于该上下文的值。这种上下文的一个示例是通过ng bind html绑定由用户控制的任意html。我们将这些上下文称为特权上下文或SCE上下文
因此，您可以使用ngBindHtml
指令，而不是普通插值
<div ng-bind-html="url.content"></div>

如果HTML代码包含HTML
和body
标记，我不确定会发生什么。也许你需要删除它们。
事实上，我意识到我们需要同时使用ng bind html
和$sce.trustAsHtml。。。
<div ng-bind-html="url.content"></div>

resolve: {
    url: ['$sce', '$stateParams', 'urls', function ($sce, $stateParams, urls) {
        return $sce.trustAsHtml(urls.get($stateParams.id));
    }]
}