テンプレートにiframeがあります。src
は、物理的なHTMLファイルを参照しています。コントローラでリスナーをiframeのsrcに無効にする
<iframe id="myiframe" src="{{src}}">
</iframe>
、機能rewriteAllFiles
は、物理html, js, css
ファイルを更新するために、随時呼ばれています。最初にすべての古いファイルを削除してから新しいファイルを書き出し、iframeを更新します。
var refreshIframe = function() {
var iframe = document.getElementById('myiframe');
iframe.src = iframe.src;
console.log("refreshIframe, done")
}
rewriteAllFiles = function (path, files) {
return $http.post('/emptyDir', { dir: prefix + idP + "/", path: path })
.then(function (res) {
console.log("rewriteAllFiles /emptyDir, done");
return $http.post('/writeFiles', { dir: prefix + idP + "/", files: files })
.then(function (res) {
console.log("rewriteAllFiles /writeFiles, done");
refreshIframe();
return res
})
})
}
$scope.$watch(... {
return rewriteAllFiles($location.path(), $scope.files);
})
私のテストは、時にはそれがエラーなしで動作しますが、時々、それは次のログを与える示しています、
rewriteAllFiles /emptyDir, done
GET http://localhost:3000/tmp/P0L7JSEOWux3YE1FAAA6/index.html 404 (Not Found)
rewriteAllFiles /writeFiles, done
refreshIframe, done
だから、後に古いファイルが削除されているようだと、新しいファイルが書き込まれる前に、 HTMLテンプレートがsrc
を読み込もうとしているため、ファイルが一時的に使用できなくなっています。私はsrc
のウォッチャーを設定していませんでした。だれかがsrc
のリスナーであることを知っていますか?それを無効にする方法はありますか?
編集1:ここでは、サーバー側のwriteFiles
のコードです:
router.post('/writeFiles', function (req, res, next) {
var dir = req.body.dir, files = req.body.files;
var fs = require('fs');
var queue = files.map(function (file) {
return new Promise(function (resolve, reject) {
fs.writeFile(dir + file.name, file.body, function (err) {
if (err) return reject(err);
console.log(dir + file.name + " is written");
resolve(file);
})
})
});
Promise.all(queue)
.then(function(files) {
console.log("All files have been successfully written");
res.json(dir);
})
.catch(function (err) {
return console.log(err)
});
});
「ng-src」を使用してください。ファイルが書き込まれる前にポストリクエストが完了しているので、問題はサーバー側です。 – charlietfl
'
ファイルが書き込まれる前に、サーバーコードロジックが応答を送信していることをお勧めします。 – charlietfl