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

Question

我正在对 Canvas 进行一些 HTML5 视频操作。我已经制定了一条指令，需要选择一些子元素。到目前为止，我这样做没有任何问题，因为我有 2 canvas标签。

html:

<div id="video-to-canvas" canvas-video-map>

  <video id="menu-video" loop  controls  preload="auto">
    <source src="../../images/clouds.mp4" type="video/mp4">
  </video>

  <canvas id='menu-canvas'></canvas>
  <canvas id='back-canvas'></canvas>

</div>

js:

            //grabs the childrend of the directive for selection e.g. video && canvas tag
            var el = {
                video:    element.find('video')[0],
               // how do i select between these two canvas tags properly
                canvas:   element.find('canvas')[0],
                back:     element.find('canvas')[0]

            };

另外，如果我尝试 el.canvas.append('<canvas></canvas>)我收到类型错误额外代码

         .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);
            }
        }
    };
});

Answer 1

您可以使用 JavaScript 的 native ID 选择器

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

或者出于某种原因，如果您想坚持使用 Angular 方法并且两个 Canvas 始终以相同的顺序加载，您可以只指定从 .find 返回的数组上的索引号

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

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

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

关于您问题的第二部分，您能否提供JSFiddle重现错误？