Question

我正在AngularJS中构建单页应用程序。这包括父/ shell页面和其中的子页面。我的第一个子页面给了我一些问题 - 它使用了一个Signature Pad，它来自JS file，以及我写的另一个JS文件使用Pad。在子页面加载时，它必须使用我的文件中的一个函数，该函数调整Pad的大小以匹配屏幕大小。

但是，子页面无法访问JS文件来运行该功能。父页面无法到达Pad以调整其大小。我如何设法让2进行沟通？有没有更好的方法来解决这个问题？

我的signaturepage.js操纵Signature Pads：

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
var canvas1Hidden = document.getElementById("canvas1Hidden");
var canvas2Hidden = document.getElementById("canvas2Hidden");

var createPad = function(canvas){
    canvas.pad = new SignaturePad(canvas);
}

var resizeCanvas = function(canvas) {
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
    canvas.pad.clear(); // otherwise isEmpty() might return incorrect value
}

var clearCanvas = function(canvas){
    canvas.pad.clear();
}

var resizeCanvases = function(){
    resizeCanvas(canvas1);
    resizeCanvas(canvas2);
}

var serializeCanvases = function(){
    canvas1Hidden.value = canvas1.pad.toDataURL();
    canvas2Hidden.value = canvas2.pad.toDataURL();
}

createPad(canvas1);
createPad(canvas2);
window.addEventListener("resize", resizeCanvases);
resizeCanvases();

目前，我的JS文件包含在子页面的顶部或底部 - 但是，这给出了主线程上的XHMLHttpRequest已弃用...警告。这是我想要避免的。或者，从shell文件中请求JS文件最初使签名板的大小错误 - resizeCanvases（）在画布实际存在之前运行。在window.resize事件发生后，它只会使它们成为正确的大小。

在AngularJS SPA中使用JS文件作为子页面

0 个答案: