Javascript 使用AngularJs打印Div内容_Javascript_Jquery_Html_Css_Angularjs

Javascript 使用AngularJs打印Div内容

javascript jquery html css angularjs

Javascript 使用AngularJs打印Div内容,javascript,jquery,html,css,angularjs,Javascript,Jquery,Html,Css,Angularjs,在AngularJs应用程序中，我想在某些on事件中将生成的内容注入到printDiv中。此printDiv是使用样式设置的，应仅在打印时显示下面是代码片段： @media print { body > #printDiv{ display:block; } body > #screenContent{ display:none; } } @media screen { body >

在AngularJs应用程序中，我想在某些on事件中将生成的内容注入到printDiv中。此

printDiv

是使用样式设置的，应仅在打印时显示

下面是代码片段：

@media print {    
    body > #printDiv{
        display:block;
    }
    body > #screenContent{
        display:none;
    }        
}
@media screen {
    body > #printDiv {
        display: none;
    }
    body > #printContent{
        display:block;
    }
}

在某些事件上，比如（

ng单击

），比如下面的示例，它调用控制器上的函数

GenerateContent（）

$scope.GenerateContent = function () {
   $("#divOne").text(data.FirstName);
   $("#divTwo").text(data.LastName);
   ...
     $scope.Print();
}

在这里，我尝试使用纯JS获取以前注入的内容，然后使用

window.print（）

打印，如下所示：

$scope.Print = function () {
    var content = document.getElementById("printContent").innerHTML;            
    document.getElementById('printDiv').innerHTML = content;
    window.print();
}

<html>
   <body>
       <div id="screenContent">
           // html content for screen only
       </div>
       <div id="printDiv"></div>
       <div id="printContent">
          <div id="divOne"></div>
          <div id="divTwo"></div>
       </div>
   </body>
</html>

最后，html页面上的div结构如下所示：

$scope.Print = function () {
    var content = document.getElementById("printContent").innerHTML;            
    document.getElementById('printDiv').innerHTML = content;
    window.print();
}

<html>
   <body>
       <div id="screenContent">
           // html content for screen only
       </div>
       <div id="printDiv"></div>
       <div id="printContent">
          <div id="divOne"></div>
          <div id="divTwo"></div>
       </div>
   </body>
</html>

和内部控制器

$scope.firstName = data.FirstName;
$scope.lastName = data.LastName;

但这并没有向dom注入任何东西

我还尝试了

ng model

而不是

ng bind

，这也不起作用

更新2

myController
(function () {
    "use strict";
    app.controller('myController',
       ....
        $http({
             method: 'POST',
             url: '/SomeService',
             data: ....,
           }).success(function (data) {
              $scope.firstName = data.FirstName;
              $scope.lastName = data.LastName;
          }
       });
    ...
}());

更新3

<div id="printDiv">
   <div id="printContent" ng-app="myApp" ng-controller="myController">
      <div id="divOne" ng-bind="data.firstName"></div>
      <div id="divTwo" ng-bind="lastName"></div>
   </div>
</div>

我调用window.print来打印printDiv中的内容，元素绑定到控制器属性，但这不起作用。当我查看firebug内部时，内容根本没有绑定（html结构看起来与ng bing一致，但没有绑定到该元素的实际内容）

我做错了什么？

所以在angular应用程序中使用jQuery注入内容是行不通的，因为angular目前不知道事情已经发生了变化，需要更新UI。对此的快速修复方法是使用Angular的

$timeout

，它是一个setTimeout，已被修改为与Angular digest循环一起工作。任何使用jQuery更新UI的函数都应包装在$timeout中，如下所示：

$scope.GenerateContent = function () {
  $timeout(function () {
    $("#divOne").text(data.FirstName);
    $("#divTwo").text(data.LastName);
    ...
    $scope.Print();
  }, 0);
}

这将导致angular评估DOM更新。

PS：别忘了将$timeout注入控制器。

因此，在angular应用程序中使用jQuery注入内容是行不通的，因为angular目前不知道事情已经发生了变化，需要更新UI。对此的快速修复方法是使用Angular的

$timeout

，它是一个setTimeout，已被修改为与Angular digest循环一起工作。任何使用jQuery更新UI的函数都应包装在$timeout中，如下所示：

$scope.GenerateContent = function () {
   $("#divOne").text(data.FirstName);
   $("#divTwo").text(data.LastName);
   ...
     $scope.Print();
}

$scope.GenerateContent = function () {
  $timeout(function () {
    $("#divOne").text(data.FirstName);
    $("#divTwo").text(data.LastName);
    ...
    $scope.Print();
  }, 0);
}

这将导致angular评估DOM更新。

PS：别忘了向控制器中注入$timeout。

无法从断开连接的位和块中分辨出您偏离了轨道的位置（例如，GenerateContent相对于其他所有内容位于何处？），但下面是一个非常简单的示例，说明控制器在没有jQuery的情况下执行您的要求：

$scope.GenerateContent = function () {
   $("#divOne").text(data.FirstName);
   $("#divTwo").text(data.LastName);
   ...
     $scope.Print();
}

DOM:

无法从断开连接的位和块中分辨出您正在偏离轨道的位置（例如，GenerateContent相对于其他所有内容位于何处？），但下面是一个非常简单的示例，说明控制器在没有jQuery的情况下执行您的要求：

DOM:

这不是个好主意。任何使用jQuery更新UI的函数都应该重写为不使用jQuery更新UI。说真的，如果你要这么做的话，首先使用Angular是没有意义的。这不是一个好主意。任何使用jQuery更新UI的函数都应该重写为不使用jQuery更新UI。说真的，如果你要这么做，首先使用Angular是没有意义的。永远不要直接在Angular中修改DOM。让我为你做吧。例如

$（“#divOne”）.text（data.FirstName）应该仅在指令中
。我建议你学习一些angular入门教程，它确实需要一种与你在jQuery中习惯的完全不同的思维方式。你的控制器代码是什么样子的？你的更新3：你有ng app=“myApp”
但是angular.module（'foo'，[]）
--将“foo”切换到“myApp”（或者反之亦然）。好的，你知道我为什么会有这种行为吗？它不会从控制器属性绑定任何东西到div？因为你有语法错误<代码>$scope.firstName:“Bob”应该是$scope.firstName=“Bob”，$scope.lastName:“史密斯”应该是$scope.lastName=“Smith”，您应该观察javascript控制台以捕获这样的小错误。永远不要直接在Java中修改DOM。让我为你做吧。例如$（“#divOne”）.text（data.FirstName）应该仅在指令中
。我建议你学习一些angular入门教程，它确实需要一种与你在jQuery中习惯的完全不同的思维方式。你的控制器代码是什么样子的？你的更新3：你有ng app=“myApp”
但是angular.module（'foo'，[]）
--将“foo”切换到“myApp”（或者反之亦然）。好的，你知道我为什么会有这种行为吗？它不会从控制器属性绑定任何东西到div？因为你有语法错误<代码>$scope.firstName:“Bob”应该是$scope.firstName=“Bob”，$scope.lastName:“史密斯”应该是$scope.lastName=“Smith”，您应该观察javascript控制台以捕获这样的小错误。谢谢Daniel，但是在控制器代码中的$scope.data之后，您将如何从这里将这个printContent div内容注入到#printDiv？同样的方法——将数据放在$scope上并从DOM绑定到它。最好摆脱直接在DOM中搜索、复制节点并将其注入的思维习惯；angular确实要求您考虑修改底层数据并与其绑定。（如果printDiv和printContent总是包含相同的html，那么最好将其封装为一个指令并嵌入该指令两次。如果它们需要在不同的html结构中包含相同的数据，那么您可以将相同的数据位绑定到多个DOM节点，angular将跟踪它们的更新。）我不知道我做错了什么，我用ng app=“myApp”绑定div，用co绑定每个div