使用 AngularJs 打印 Div 内容

Question

Inside AngularJs app, I want to inject generated content inside printDiv on certain on event.在 AngularJs 应用程序中，我想在某个事件的 printDiv 中注入生成的内容。 This printDiv is styled using and should be displayed on print only.此printDiv使用样式设置，应仅在打印时显示。

Below is the code snippet:下面是代码片段：

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

On certain event like ( ng-click ) like below example it calls function GenerateContent() on controller.在某些事件（如（ ng-click ）如下例所示GenerateContent()上，它会在控制器上调用函数GenerateContent() 。

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

Here, I tried to fetch previously injected content using plain JS and then printed using window.print() like below:在这里，我尝试使用普通 JS 获取先前注入的内容，然后使用window.print()打印，如下所示：

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

And, finally on html page div structure is like below:并且，最后在 html 页面 div 结构如下：

<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>

On first attempt content is generated correctly and printed well.第一次尝试时，内容生成正确且打印良好。 On every other attempt content is not injected, it always prints content generated on first attempt.每次其他尝试都不会注入内容，它总是打印第一次尝试时生成的内容。

Is this correct way of injecting and printing div using AngularJs SPA?这是使用 AngularJs SPA 注入和打印div正确方法吗？ How can my example be fixed to work in expected manner?我的示例如何修复以按预期方式工作？

Update:更新：

I tried with ng-bind instead of using jquery like this我尝试使用 ng-bind 而不是像这样使用 jquery

<div id="printContent" ng-controller="myController">
    <div id="divOne" ng-bind="firstName"></div>
    <div id="divTwo" ng-bind="lastName"></div>
</div>

and inside controller和内部控制器

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

but this doesnt inject anything into dom.但这并没有向dom中注入任何东西。

I tried also with ng-model instead of ng-bind that also doesnt work.我也尝试过使用ng-model而不是ng-bind也不起作用。

Update 2更新 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;
          }
       });
    ...
}());

Update 3更新 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>

myController code我的控制器代码

angular.module('myApp', [])
.controller('myController', function ($scope) {
   $scope.firstName: "Bob";
   $scope.lastName: "Smith";
   window.print();
});

I'm calling window.print to print content inside printDiv where elements are binded to controller properties, yet this not working.我正在调用 window.print 来打印 printDiv 中元素绑定到控制器属性的内容，但这不起作用。 When I look inside firebug content is not binded at all (html structure looks ok with ng-bing, but there is no actual content binded to that element).当我查看萤火虫内容时，它根本没有绑定（使用 ng-bing 的 html 结构看起来不错，但没有绑定到该元素的实际内容）。

What I'm doing wrong here?我在这里做错了什么？

Answer 1

Can't tell from your disconnected bits and pieces where you're going off track (where is GenerateContent located relative to everything else for example?) but here is a very simple example of a controller doing what you're asking for without jQuery:无法从断开连接的点点滴滴中判断出您偏离轨道的位置（例如，GenerateContent 相对于其他所有内容的位置在哪里？）但这是一个非常简单的示例，说明控制器在没有 jQuery 的情况下执行您所要求的操作：

DOM: DOM：

<div ng-app="foo">
     <div id="printContent" ng-controller="demoController">
        <div id="divOne" ng-bind="data.firstName"></div>
        <div id="divTwo" ng-bind="data.lastName"></div>
    </div>
</div>

Controller:控制器：

angular.module('foo', [])
    .controller('demoController', function ($scope) {
    $scope.data = {
        firstName: "Bob",
        lastName: "Smith"
    };

})

https://jsfiddle.net/m10ojexn/ https://jsfiddle.net/m10ojexn/

Answer 2

So injecting content using jQuery in an angular app like this isn't going to work as Angular currently has no idea that things have changed and it needs to update the UI.因此，在像这样的 Angular 应用程序中使用 jQuery 注入内容是行不通的，因为 Angular 目前不知道事情已经发生了变化，它需要更新 UI。 The quick fix for this is using Angular's $timeout which is setTimeout that has been modified to work in conjunction with the Angular digest cycle.对此的快速修复是使用 Angular 的$timeout ，它是 setTimeout ，它已被修改为与 Angular 摘要循环一起工作。 Any functions that use jQuery to update the UI should be wrapped in $timeout, like this:任何使用 jQuery 更新 UI 的函数都应该包含在 $timeout 中，如下所示：

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

This should cause angular to evaluate your DOM updates.这应该会导致 angular 评估您的 DOM 更新。 PS: Don't forget to inject $timeout into your controller. PS：不要忘记将 $timeout 注入您的控制器。

使用 AngularJs 打印 Div 内容

问题描述

2 个解决方案

解决方案1
0 2015-07-09 18:16:18

解决方案2
-3 2015-07-09 17:15:00

使用 AngularJs 打印 Div 内容

问题描述

2 个解决方案

解决方案1 0 2015-07-09 18:16:18

解决方案2 -3 2015-07-09 17:15:00

解决方案1
0 2015-07-09 18:16:18

解决方案2
-3 2015-07-09 17:15:00