Menu
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);
}]);
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.
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.
Does anyone know how to amend this?
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.
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).
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...
279
To create a folder, go to the Page Settings → Additional → Create new folder. You can place any page in the folder, except for your website's Home Page, Header, and Footer.
Use the dir tag in HTML to display directory list. This is very similar to <ul> tag but do not use <dir> since it is deprecated now.
To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. my-image. jpg . To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image. jpg .
You may use <object> if you prefer.
<object type="text/html" data="https://www.matrixlead.com/tmp/index.html"></object>
See updated plunker here.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
