以前,我曾经$sce.trustAsHtml(aString)在<html>...</html>模板中注入一个字符串(例如),<div ng-bind-html="content"></div>以便在加载生成的URL时显示图形:
.state('urls', {
url: '/urls/{id}',
template: '<div ng-bind-html="content"></div>',
controller: 'UrlCtrl',
resolve: {
url: ['$stateParams', 'urls', function ($stateParams, urls) {
return urls.get($stateParams.id);
}]
}
})
app.controller('UrlCtrl', ['$sce', '$scope', 'url', function($sce, $scope, url) {
$scope.content = $sce.trustAsHtml(url.content);
}]);
Run Code Online (Sandbox Code Playgroud)
现在,生成图形的html包含对其他文件的引用,例如<script src="script.js"></script>.所以,我需要的文件的文件夹(.html,.css,.js)绘制的图表.我可以将整个文件夹放在我的服务器中,但问题是如何将这些文件注入模板.
我试过templateUrl: 'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html',localhost:3000/#/urls/58b8c55b5d18ed6163324fb4在浏览器中加载确实加载了html页面.但是,script.js未加载,Failed to load resource: the server responded with a status of 404 (Not Found) …
尝试使用ng-bind-htmlAngularJS将Irame插入到页面中我即使是最简单的形式也无法使用它.
使用Javascript
function Ctrl($scope) {
$scope.showIt = '<iframe src="http://www.anything.com"></iframe>';
}
Run Code Online (Sandbox Code Playgroud)
我的HTML:
<div ng-bind-html="showIt"></div>
Run Code Online (Sandbox Code Playgroud)