Question

我尝试使用Angular使用ng-if打印页面。

＆＃13;

$scope.onBtnPrintClicked = function(journal, date) {
  $scope.printTransaction = false;
  $scope.current = new Date();
  window.print()
};

$scope.onBtnPrintTransactionClicked = function(journal, date) {
  $scope.printTransaction = true;
  $scope.current = new Date();
  window.print()
};

＆＃13;

<button ng-click="onBtnPrintTransactionClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i>&nbsp;Print</button>
<button ng-click="onBtnPrintClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i>Print 2</button>


<section ng-if="printTransaction" class="printable journal-container">
  <h1>PRINT</h1>
</section>
<section ng-if="!printTransaction" class="printable journal-container">
  <div class="row">
    <div class="col-sm-12">PRINT2</div>
  </div>
</section>

＆＃13;

但是当我尝试点击打印/打印2时，它会显示不同的页面/内容。可能是什么问题？

Answer 1

根据您的问题我可以理解您是否正在尝试打印当前页面，但functions所执行的更改并未完全加载但是，你可以使用setTimeout做一点延迟，如下所示：

＆＃13;

(function() {
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.printTransaction = true;
    
    $scope.onBtnPrintClicked = function(journal, date) {
      $scope.printTransaction = false;
      $scope.current = new Date();
      setTimeout(function() {
        window.print();
      }, 500);
    };

    $scope.onBtnPrintTransactionClicked = function(journal, date) {
      $scope.printTransaction = true;
      $scope.current = new Date();
      setTimeout(function() {
        window.print();
      }, 500);
    };
  }
})();

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>

<body ng-controller="MainCtrl">
  <button ng-click="onBtnPrintTransactionClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i>&nbsp;Print</button>
  <button ng-click="onBtnPrintClicked(journal, selected.date)" class="btn btn-default btn-sm"><i class="fa fa-print"></i>&nbsp;Print 2</button>
  <section ng-if="printTransaction" class="printable journal-container">
    <h1>PRINT</h1>
  </section>
  <section ng-if="!printTransaction" class="printable journal-container">
    <div class="row">
      <div class="col-sm-12">PRINT2</div>
    </div>
  </section>
</body>

</html>

＆＃13;

注意：我不知道这些是否真实functions，但您可以简化它并在一个function中完成所有操作。

如果不是真的如预期那样

1 个答案: