Question

我有一个包含不同div元素的页面

<body> <div id="forPrintingHeader" > <div>...</div> </div> <div add-div-to-printing-header id="PieChartContainer" > <svg id="pieSVG">....</svg> </div </body>

#PieChartContainer div元素包含svg元素
我要打印的所有内容都在#forPrintingHeader div元素

中

当我点击打印然后我为身体display:none和#forPrintingHeader div visibility:visible

应用css

add-div-to-printing-header 是指令 - 它复制一个元素并将其添加到同一页面上的另一个元素并修改一些css属性--visibility打印此div元素时

  AngularPrint.directive('addThisToPrinting', function(){
  return {
    restrict: 'A',
    controller:printContoller,
    link: function(scope, element){
        var c=element.clone();
        var b=$('div#forPrintingHeader');//header for printing 
      //apply css @media print { visibility:visible; display:initial;}
        c[0].classList.add('printOnly');   
        c.appendTo(b);//append in header 
      }
    }
  });

但它不起作用..我无法根据需要修改DOM

    copy a DOM element and change some css and add  in another DOM Element

此处所选元素#PieChartContainer也是修改

可能是因为

1 - id相同（选定元素和克隆元素）

我不知道如何在指令

中更改克隆元素的id

2--这是一个svg元素

请提出一些方法来解决这个问题OR我错过了什么......

Answer 1

删除'id'添加一个类，并使用指令中的类选择器而不是Id选择器。

使用Angular Directive制作自定义打印页面

1 个答案: