P5.js Draw（）函数无法在AngularJS指令中正常工作

Question

我试图将p5.js库集成到我的AngularJS应用程序中，使我的代码在指令中运行。

在我的普通JavaScript文件中，在全局导入p5库之后，我能够运行draw（）方法。

我的原始代码（不是问题）：

var mic
var playButton
var volHistory = []
var micIsOn = false

function setup(){
    createCanvas(400, 150)
    createButtons()
    mic = new p5.AudioIn()
}

function draw(){
    background(245)
    stroke(0, 109, 203) 

    //populate volHistory
    if(micIsOn){
        var vol = mic.getLevel()
        //check to see if array is empty, if it is empty we do not want to push 0 volume
        if(volHistory.length > 0 && vol > 0){
            volHistory.push(vol)
        //if recording has started, we can now take in vol
        } else if(vol > 0) {
            volHistory.push(vol)
            console.log(volHistory.length)
        }
    }

    //iterate through volHistory and draw
    fill(0, 109, 203)
    var barWidth = 2;
    var offsetWidth = 5;
    var offset = 5;
    for(var i = 0; i < volHistory.length; i++){
        var barHeight = map(volHistory[i], 0, 1, 1, height)
        rect(i + offset, (height/2.0) - (barHeight/2.0), barWidth, barHeight, 15);
        offset += offsetWidth;
    }

    //moves wavelength 1 index at a time and account for bar width and offset width
    if(volHistory.length * (offsetWidth + barWidth) > width){
        volHistory.splice(0, 1)
    }

    //draw vertical line
    stroke(250, 30, 100)
    line(volHistory.length + offset, 0, volHistory.length + offset, height) 
}

function createButtons(){
    playButton = createButton("<img style='width: 50px' src='playbutton.png'/>")
    playButton.mousePressed(toggleRecord)
    playButton.position(162, 50)
    playButton.style("background-color", color(0,0,0,0))
    playButton.style("border", 0)
}

//toggle recording of audio
function toggleRecord(){
    if(!micIsOn){
        mic.start()
        micIsOn = true
    } else {
        mic.stop()
        micIsOn = false
    }
}

上面的代码让我创建了一个声音可视化器，它可以接入用户的麦克风，并绘制一个画布来显示他们的声音水平。看起来像这样：

但是，当我尝试在Angular指令中使用该库时，似乎无法使draw（）方法正常运行。 draw（）函数不会像在Angular指令之外那样连续运行。

最接近使它起作用的方法是在变量上创建一个$watch来跟踪用户是否正在录制。如果isRecording为true，我将使用setInterval连续调用draw（）。不幸的是，这似乎是对draw（）方法的不当使用，因为它应该在第一次执行后自行连续执行内部代码。

角度代码：

(function () {

    angular.module('icSdkPwp').directive('icAudioRecordingUpload', icAudioRecordingUpload);

    function icAudioRecordingUpload($stateSvc, $rS, $utilSvc) {
        return {
            scope: {
                model: '=',
                config: '=',
                updateState: '='
            },
            link: function ($s, e, a) {

                $s.hasRecording = false;
                $s.isRecording = false;
                $s.recordingPaused = false;
                $s.recordingProcessing = false;
                $s.volHistory = []
                $s.micIsOn = false
                $s.p5mic = null
                $s.playButton = null

            var gumStream;
            var rec;
            var input;

            var AudioContext = window.AudioContext || window.webkitAudioContext;
            var audioContext

            $s.startRecording = function(e) {
                if($s.recordingProcessing)
                    return;

                var constraints = { audio: true, video:false }
                setup()
                $s.isRecording = true;

                navigator.mediaDevices.getUserMedia(constraints)
                  .then(function(stream) {
                    audioContext = new AudioContext();
                    gumStream = stream;
                    input = audioContext.createMediaStreamSource(stream);
                    rec = new Recorder(input,{numChannels:2})
                    rec.record()

                }).catch(function(err) {
                    $s.isRecording = true;
                });
            }

           var redrawInt = null;
           $s.$watch("isRecording", function (n, o, s) {
                if(s.isRecording){
                    redrawInt = setInterval(function(){
                        draw()
                    },0);
                }
                else{
                    clearInterval(redrawInt);
                }

            });


            function setup(){
                createCanvas(400, 150)
                $s.p5mic = new p5.AudioIn()
                $s.p5mic.start()
                $s.micIsOn = true
                background(245)
            }

            function draw(){
                stroke(0, 109, 203) 

                //populate volHistory
                if($s.isRecording){
                    var vol = $s.p5mic.getLevel()
                    //check to see if array is empty, if it is empty we do not want to push 0 volume
                    if($s.volHistory.length > 0 && vol > 0){
                    $s.volHistory.push(vol)
                    //if recording has started, we can now take in vol
                    } else if(vol > 0) {
                        $s.volHistory.push(vol)
                    }
                }

                //iterate through volHistory and draw
                fill(0, 109, 203)
                var barWidth = 2;
                var offsetWidth = 5;
                var offset = 5;
                for(var i = 0; i < $s.volHistory.length; i++){
                    var barHeight = map($s.volHistory[i], 0, 1, 1, height)
                    rect(i + offset, (height/2.0) - (barHeight/2.0), barWidth, barHeight, 15);
                    offset += offsetWidth;
                }

                    //moves wavelength 1 index at a time and account for bar width and offset width
                if($s.volHistory.length * (offsetWidth + barWidth) > width){
                    $s.volHistory.splice(0, 1)
                }

                    //draw vertical line
                stroke(250, 30, 100)
                // debugger
                line($s.volHistory.length + offset, 0, $s.volHistory.length + offset, height) 
            }

        }
        };
    }

}());

调用startRecording（）的按钮，以启动进程

<div class="IX_recordControls clearfix">
    <div class="rcrow row1">
        <div ng-click="recordingProcessing || startRecording($event)"
             ng-if="!hasRecording">
    </div>
</div>

这给了我一个非常古怪的画布，我认为这是可以预期的，因为我不应该多次调用draw（），但是我找不到一种方法来使其一次调用并连续运行。

这肯定看起来像是一个范围问题，其中draw（）方法无法执行自己的循环。