问题描述
以前,我使用 $sce.trustAsHtml(aString)
来注入字符串 (例如,<html>...</html>
) 到模板 <div ng-bind-html="content"></div>
在加载生成的 URL 时显示图表:
Previously, I used $sce.trustAsHtml(aString)
to inject a string (eg, <html>...</html>
) to a template <div ng-bind-html="content"></div>
to display a graph when loading a generated 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);
}]);
现在,用于生成图形的 html 包含对其他文件的引用,例如 <script src="script.js"></script>
.所以我需要一个文件文件夹(.html
、.css
、.js
)来绘制图表.我可以将整个文件夹放在我的服务器中,但问题是如何将这些文件注入到模板中.
Now, the html to generate a graph contains references to other files, eg, <script src="script.js"></script>
. So I need a folder of files (.html
, .css
, .js
) to draw a graph. I can put the whole folder in my server, but the problem is how to inject these files to the template.
我试过 templateUrl: 'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'
,加载 localhost:3000/#/urls/58b8c55b5d18ed6163324fb4
浏览器确实加载了 html 页面.但是,script.js
未加载,控制台日志中显示错误 Failed to load resource: the server respond with a status of 404 (Not Found)
.
I tried templateUrl: 'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'
, loading localhost:3000/#/urls/58b8c55b5d18ed6163324fb4
in the browser does load the html page. However, script.js
is NOT loaded, an error Failed to load resource: the server responded with a status of 404 (Not Found)
is shown in the console log.
有人知道怎么修改吗?
否则,是否有任何其他方式可以说类似 src=http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html
(例如在 iframe
中)?那么,index.html
中的<script src="script.js"></script>
就会知道它指的是script.js
在同一个文件夹中.
Otherwise, is there any other ways to say something like src=http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html
(like in iframe
)? Then, <script src="script.js"></script>
in index.html
will know it refers to the script.js
in the same folder.
根据@Icycool的评论,我改成了templateUrl: '/htmls/test.html'
,和test.html
包含 <div ng-include="'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'"></div>
.测试表明它确实加载了 test.html
和 index.html
,但没有加载 script.js
:GET http://localhost:3000/script.js?_=1488543470023 404(未找到)
.
Edit 1: Following the comment of @Icycool , I changed to templateUrl: '/htmls/test.html'
, and test.html
contains <div ng-include="'http://localhost:3000/tmp/ZPBSytN5GpOwQN51AAAD/index.html'"></div>
. The test showed it did load test.html
and index.html
, but NOT script.js
: GET http://localhost:3000/script.js?_=1488543470023 404 (Not Found)
.
编辑 2: 我创建了两个文件用于测试目的:index.html 和 script.js.这是一个plunker,既不是模板
也不是 templateUrl
工作,如解释...
Edit 2: I have created two files for test purpose: index.html and script.js. Here is a plunker, neither template
nor templateUrl
works, as explained...
推荐答案
如果您愿意,可以使用 .
You may use <object>
if you prefer.
<object type="text/html" data="https://www.matrixlead.com/tmp/index.html"></object>
查看更新的插件这里.
这篇关于使用包含外部文件的文件夹制作网页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!