从生成的网址加载图形

debugcn 发表于 Dev

柔音

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

然后，我想像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>我的global中index.ejs。该行为是预期的，但这不是我希望用户在加载时看到的内容www.mysite.com/urls/58a56d0962bd39979d142e27。

有谁知道如何设置从生成的网址加载图形？

莱昂纳多·查亚

我相信您需要使用Angular的严格上下文转义服务，即$sce。

严格上下文转义（SCE）是一种模式，其中AngularJS要求在某些上下文中进行绑定以生成一个值，该值被标记为可安全用于该上下文。这种上下文的一个示例是通过ng-bind-html绑定由用户控制的任意html。我们将这些上下文称为特权或SCE上下文。

因此，您既可以使用ngBindHtml指令，也可以使用普通插值。

<div ng-bind-html="url.content"></div>

或者，您也可以注入$sce您的urlresolve函数和calltrustAsHtml方法：

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

我不确定如果您的HTML代码包含html和body标记，该怎么办。也许您需要将其删除。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。