使用 AngularJs 打印 Div 內容

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()上，它會在控制器上調用函數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>

我的控制器代碼

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

我正在調用 window.print 來打印 printDiv 中元素綁定到控制器屬性的內容，但這不起作用。 當我查看螢火蟲內容時，它根本沒有綁定（使用 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

因此，在像這樣的 Angular 應用程序中使用 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 個解決方案

解決方案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