Загрузить график из сгенерированного URL

Я хочу создать онлайн-площадку для 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-адреса, например 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);
                }]
            }
        })

Однако приведенный выше код просто показывает строку, а не график:

введите здесь описание изображения

Кроме того, он встроен в <ui-view></ui-view> моего глобального index.ejs. Такое поведение ожидаемо, но это не то, что я хочу, чтобы пользователи видели при загрузке www.mysite.com/urls/58a56d0962bd39979d142e27.

Кто-нибудь знает, как настроить загрузку графика из сгенерированного URL?


javascript canvas html angular-ui-router angular-ui-router-extras
person SoftTimur    schedule 16.02.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я считаю, что вам нужно использовать службу Angular Strict Contextual Escapeing, более известную как $sce.

Строгое контекстное экранирование (SCE) — это режим, в котором AngularJS требует привязок в определенных контекстах, чтобы получить значение, помеченное как безопасное для использования в этом контексте. Одним из примеров такого контекста является привязка произвольного html, контролируемого пользователем через ng-bind-html. Мы называем эти контексты привилегированными контекстами или контекстами SCE.

Таким образом, вы можете использовать директиву ngBindHtml вместо простой интерполяции.

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

Или вы также можете внедрить $sce в свою функцию разрешения url и вызвать метод trustAsHtml:

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

Я не уверен, что произойдет, если ваш HTML-код будет содержать теги html и body. Возможно, вам нужно будет удалить их.

person Leonardo Chaia    schedule 16.02.2017
comment
На самом деле, я понял, что нам нужно использовать ng-bind-html и $sce.trustAsHtml одновременно... - person SoftTimur; 17.02.2017