Javascript 使用Angular的jqlite选择相同类型的元素

我正在做一些HTML5视频到画布的操作。我已经做了一个指令，我需要选择几个子元素。到目前为止，我一直没有问题，因为我有两个画布标签

html:

如果我尝试el.canvas.append，我也会得到一个类型错误 额外代码

         .directive('canvasVideoMap', function($window) {
            return {
                link: function(scope, element, attrs) {
                    angular.element(document).ready(function() {

                //grabs the childrend of the directive for selection e.g. video && canvas tag
                var el = {
                    video:    element.find('video')[0],
                    canvas:   element.find('canvas')[0],
                    back:     element.find('canvas')[0]

                };
                //tests to see if the video is ready
                el.video.addEventListener("loadedmetadata", function(){
                    scope.$emit('load::video');

                }, false);

                //inits the context and sizes
                var context = el.canvas.getContext('2d');
                var cw = Math.floor(el.canvas.clientWidth );
                var ch = Math.floor(el.canvas.clientHeight);
                el.canvas.width = cw;
                el.canvas.height = ch;


                //waits for broadcast from mainctrl
                scope.$on('load::menu', function() {
                    el.video.play();  
                });

                //adds the event listener if the video is playing
                el.video.addEventListener('play', function(){
                    draw(this,context,cw,ch);
                },false);



            }, false);
        //the recursive draw loop
           function draw(v,c,w,h) {
                if(v.paused || v.ended) return false;
                c.drawImage(v,0,0,w,h);

                //creates gradient
                var grd = c.createLinearGradient(0,0, w,h);

                //configures gradient fill
                grd.addColorStop(0,"hsla(268,92%,19%,.9)");
                grd.addColorStop(1,"hsla(30,100%,50%,.9)");

                //sets gradient
                c.fillStyle = grd;
                c.fillRect(0,0,w,h);

                //sets blending mode of gradient
                c.globalCompositeOperation = "color";

                //recursive loop
                setTimeout(draw,20,v,c,w,h);
            }
        }
    };
});

---

您可以使用JavaScript的本机ID选择器

var el = {
    video:    element.find('video')[0],
    canvas:   document.getElementById('menu-canvas'),
    back:     document.getElementById('back-canvas')
};

或者出于某种原因，如果您想坚持使用角度方法，并且两个画布总是以相同的顺序加载，那么您可以在从返回的数组上指定索引号。find

最后，您可以加载jQuery并利用jQuery提供的完整CSS选择器

var el = {
    video:    element.find('video')[0],
    canvas:   element.find('#menu-canvas'),
    back:     element.find('#back-canvas')
};

至于你问题的第二部分，你能提供一个重现错误的方法吗

var el = {
    video:    element.find('video')[0],
    canvas:   document.getElementById('menu-canvas'),
    back:     document.getElementById('back-canvas')
};

var el = {
    video:    element.find('video')[0],
    canvas:   element.find('canvas')[0],
    back:     element.find('canvas')[1]
};

var el = {
    video:    element.find('video')[0],
    canvas:   element.find('#menu-canvas'),
    back:     element.find('#back-canvas')
};