2017-03-04 3 views
1

テンプレートに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) 
     }); 
}); 
+0

「ng-src」を使用してください。ファイルが書き込まれる前にポストリクエストが完了しているので、問題はサーバー側です。 – charlietfl

+0

'