从生成的URL加载图形

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

然后，我想用一个网址在浏览器的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加载图形？

来源

2017-02-16 SoftTimur

我相信你需要使用Angular的Strict Contextual Escaping服务，更多的称为$sce。

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

因此，您可以使用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标签什么会发生。也许你需要删除这些。

来源

2017-02-16 11:58:47

其实，我意识到我们需要同时使用'ng-bind-html'和'$ sce.trustAsHtml' ... – SoftTimur

从生成的URL加载图形

回答

相关问题