Question

我有一个视图，用户可以在其中查看他们的总信息的部分视图。我想要一个按钮来打印整个消息历史记录。

我看到它们的步骤将是一个指令，点击获取消息的历史记录，在范围内编译包含此数据的模板，然后打印它。但是我现在已经尝试了一段时间并且已经在互联网上搜索不同的建议，从注入iframe，隐藏的div等等但是没有成功。

我是以错误的方式解决这个问题吗？

[更新]在这里，我在哪里。永远不会插入{{Message}}。

'use strict';
angular.module('casengo').directive('printMessages', [
'$log', '$window', '$compile', '$templateCache', 'CaseService', function($log, $window, $compile, $templateCache, CaseService) {

var printResults = function (mywindow) {
  mywindow.print();
  mywindow.close();
};

return {
  restrict: 'A',
  scope: {
    'case': '='
  },
link: function(scope, el, attr) {
  el.on('click', function () {
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<div id="printed" ng-repeat="message in scope.case.messages">{{message}}</div>');
    mywindow.document.write('</body></html>');

    var printContent = angular.element(mywindow.document.getElementById('printed'));

    if (scope.case.hasPrevious) {
      CaseService.loadPreviousMessages(scope.case.id, scope.case.messages[0].id, 0).then(function (res) {
          scope.case.hasPrevious = res.hasPrevious;
          if (res.messages) {
            Array.prototype.unshift.apply(scope.case.messages, res.messages);
          }
          $compile(printContent.contents())(scope);
          printResults(mywindow);
        });
      } else {
            $compile(printContent.contents())(scope);
            printResults(mywindow);
          }
        });
      }
    };
  }
]);

Answer 1

理论上你可以根据这个需要使用指令。您可以使用共享范围指令，也可以使用传递给它的消息历史记录对象的隔离范围。然后，您将使用部分（例如templateUrl：＆＃39; history.html＆＃39;）来模拟结果。

您是否有指令经验？如果没有一些特定的代码可以解决问题，很难帮助你。

以下是一些可以帮助您正确使用指令的全面教程/解释： http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals http://www.sitepoint.com/practical-guide-angularjs-directives/ http://tutorials.jenkov.com/angularjs/custom-directives.html

给你的方法一个机会，当你遇到困难时，请与我们联系。

加载模板，编译和打印

1 个答案: