Блог

Главная - Вопросы по программированию - data-ng-скрыть поведение в printpreview моего приложения

data-ng-скрыть поведение в printpreview моего приложения

#javascript #angularjs

#javascript #angularjs

Вопрос:

Вопрос: ng-hide используется дважды: с text.name.length и !text.name.length . В обоих случаях содержимое, которым они управляют, отображается при предварительном просмотре. Почему?

мой взгляд

 <div>
    <div class="content" id="printable">
    my name is  <b data-ng-hide="text.name.length">__________</b><b data-ng-hide="!text.name.length">{{text.name}}</b> 
    </div>
    <button data-ng-click="printDiv('printable')">print</button>  
</div>

это мой контроллер printpreview, который показывает мне printpreview страницы печати

PrintController

 app.controller('PrintController', function ($scope) {
    $scope.printDiv = function (divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;
        var popupWin = window.open('', '_blank', 'width=800,height=600');
        popupWin.document.open()
        popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">'   printContents   '</html>');


        popupWin.document.close();
    }
})

Комментарии:

1. В чем ваш вопрос?

2. Я сделал ваш заголовок намного короче. Если вы чувствуете, что оно неадекватно описывает вашу проблему, отредактируйте его.

3. text.name.length не является логическим

4. @PM77-1 да, однако это «правдиво». 0 -> false, 1 -> true

5. Я предполагаю, что вопрос заключается в чем-то вроде «Почему мой шаблон angular ломается, когда я помещаю его во всплывающее окно с помощью jQuery?» Ответ, очевидно, будет: «потому что вы использовали jQuery»

Ответ №1:

Потому что с вашим всплывающим окном вы покинули область angularjs.

Обратите внимание в своем коде, как вы создаете всплывающее окно с собственным html элементом и таблицей стилей?

     popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">'   printContents   '</html>');

Нет никаких признаков angular popupWin вообще.

Кроме того, в вашем приложении angular есть нечто большее, чем просто элементы DOM. Когда вы копировали DOM во всплывающее окно, вы $scope тоже как-то копировали? Нет.

Попытка расширить ваше приложение angular путем пересадки DOM сродни приему на работу, когда ваше тело отправляется в офис, а голова остается дома: это просто не работает.

Безусловно, есть лучший способ. Google angularjs print preview . Вы получите такие результаты.

Комментарии:

1. можете ли вы показать мне демонстрацию на plnkr, я немного смущен тем, как добавить область css при печати страницы..

Ответ №2:

Если я правильно понимаю, вы хотите скрыть имя, когда оно пустое, и по щелчку показать отчет с именем или без него. Вот плунжер, и я не понимаю, что у вас не работает:

 <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="'   document.location   '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="PrintController">
   <div>
   <input ng-model="text.name" />
    <div class="content" id="printable">
    my name is  <b data-ng-hide="!text.name.length">{{text.name}}</b> 
    </div>{{text.name.length}}
    <button data-ng-click="printDiv('printable')">print</button>  
</div>
  </body>

</html>


var app = angular.module('plunker', []);

app.controller('PrintController', function ($scope) {

  $scope.text = {name: 'John'};
  //$scope.text = {name: ''};

  $scope.printDiv = function (divName) {
      var printContents = document.getElementById(divName).innerHTML;
      var originalContents = document.body.innerHTML;
      var popupWin = window.open('', '_blank', 'width=800,height=600');
      popupWin.document.open()
      popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">'   printContents   '</html>');
      popupWin.document.close();
  }
})
Метки: