Question

在AngularJs应用程序中，我想在printDiv中为某些事件注入生成的内容。此printDiv使用样式并且应仅在打印时显示。

以下是代码段：

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

在某些事件（如ng-click）上，如下例所示，它会在控制器上调用函数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页面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>

首次尝试时，内容会正确生成并打印好。在每次其他尝试内容未注入时，它始终打印首次尝试时生成的内容。

这是使用AngularJs SPA注入和打印div的正确方法吗？如何修复我的例子以预期的方式工作？

更新

我尝试使用ng-bind而不是像这样使用jquery

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

和内部控制器

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

myController代码

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

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

我在这里做错了什么？

Answer 1

无法告诉您断开连接的位置（例如，GenerateContent位于相对于其他所有位置的位置？）但是这里有一个非常简单的控制器做一个非常简单的例子来做你要求的没有jQuery：

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>

控制器：

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

})

https://jsfiddle.net/m10ojexn/

Answer 2

因此，在像这样的角度应用中使用jQuery注入内容并不会起作用，因为Angular目前还不知道事情已经发生变化，需要更新UI。对此的快速解决方法是使用Angular的$timeout，它是已被修改的setTimeout，与Angular摘要周期一起使用。任何使用jQuery更新UI的函数都应该包含在$ timeout中，如下所示：

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

这会导致angular评估您的DOM更新。 PS：别忘了给控制器注入$ timeout。

使用AngularJs打印Div内容

2 个答案: