从生成的 url 加载图表

Question

我想建立一个在线 html/css/javascript 游乐场。当代码绘制图形时，我希望能够生成一个 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)
    });
};

然后，我想在浏览器中加载 url 的 ID，例如 localhost:3000/urls/58a56d0962bd39979d142e27：

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

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

此外，它嵌入在我的全局 index.ejs 的 <ui-view></ui-view> 中。该行为是预期的，但这不是我希望用户在加载 www.mysite.com/urls/58a56d0962bd39979d142e27.

时看到的

有谁知道如何设置从生成的 url 加载图表？

Answer 1

我认为您需要使用 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 解析函数中注入 $sce 并调用 trustAsHtml 方法：

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

我不确定如果您的 HTML 代码包含 html 和 body 标记会发生什么。也许你需要删除那些。

从生成的 url 加载图表

Load a graph from a generated url

html

javascript

canvas

angular-ui-router

angular-ui-router-extras