Question

问题：ng-hide使用了两次：text.name.length和!text.name.length。在这两种情况下，他们控制的内容在打印预览中都可见。为什么呢？

我的观点

<div>
    <div class="content" id="printable">
    my name is  <b data-ng-hide="text.name.length">__________</b><b data-ng-hide="!text.name.length">{{text.name}}</b> 
    </div>
    <button data-ng-click="printDiv('printable')">print</button>  
</div>

这是我的printpreview控制器，它显示打印页面的printpreview

PrintController

app.controller('PrintController', function ($scope) {
    $scope.printDiv = function (divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;
        var popupWin = window.open('', '_blank', 'width=800,height=600');
        popupWin.document.open()
        popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');


        popupWin.document.close();
    }
})

Answer 1

因为在你的弹出窗口中，你已经离开了angularjs的境界。

请注意在代码中如何使用自己的html元素和样式表构建弹出窗口？

    popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');

popupWin中没有任何角度的迹象。

此外，角度应用程序不仅仅是DOM元素。当您将DOM复制到弹出窗口时，您是否以某种方式复制$scope？不。

通过移植DOM来尝试扩展角度应用程序类似于在你的身体去办公室工作，但你的头呆在家里：它只是不起作用。

肯定有更好的方法。 Google angularjs print preview。您将获得this之类的结果。

Answer 2

如果我理解正确，您希望在名称为空时隐藏名称，并在单击时显示包含或不包含名称的报告。这是一个plunker，我不明白什么不适合你：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="PrintController">
   <div>
   <input ng-model="text.name" />
    <div class="content" id="printable">
    my name is  <b data-ng-hide="!text.name.length">{{text.name}}</b> 
    </div>{{text.name.length}}
    <button data-ng-click="printDiv('printable')">print</button>  
</div>
  </body>

</html>


var app = angular.module('plunker', []);

app.controller('PrintController', function ($scope) {

  $scope.text = {name: 'John'};
  //$scope.text = {name: ''};

  $scope.printDiv = function (divName) {
      var printContents = document.getElementById(divName).innerHTML;
      var originalContents = document.body.innerHTML;
      var popupWin = window.open('', '_blank', 'width=800,height=600');
      popupWin.document.open()
      popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</html>');
      popupWin.document.close();
  }
})

data-ng-hide在我的应用程序的打印预览中的行为

2 个答案: