Same buttons are not being displayed even if same piece of code is used

I am trying to use the same piece of code in the same HTML file repeated number of times. But when I use it, it displays properly when the piece of code is used for the first time and displays something different when used for 2 or more times. Why is it so ?

Here’s my code.. Please help me solve this.

(function (angular, undefined) {
  "use strict";

  angular
    .module("demoApp", ["ngMaterial"])
    .controller("PrintController", PrintDisplay)
    .controller("InvoiceController", InvoiceController);

  // Fictitious Employee Editor to show how to use simple and complex dialogs.

  function PrintDisplay($scope, $mdDialog) {
    var alert;

    $scope.showPrint = showInvoicePrint;

    function showInvoicePrint($event) {
      $mdDialog.show({
        targetEvent: $event,
        template:
          '<md-dialog  id="print-section" class="printSection">' +
          '    <md-dialog-content style="min-width:600px;">' +
          '        <md-content flex="" layout-padding="">' +
          ' <div class="invoice-box">  ' +
          '  <table cellpadding="0" cellspacing="0"> ' +
          '  <tr class="top"> ' +
          '  <td colspan="2"> ' +
          "  <table> " +
          "  <tr> " +
          '  <td class="title"> ' +
          "  </td> " +
          "  <td> " +
          "  Invoice #: 123<br> " +
          "  Created: January 1, 2015<br> " +
          "  Due: February 1, 2015 " +
          "  </td> " +
          "  </tr> " +
          "  </table> " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="information"> ' +
          '  <td colspan="2"> ' +
          "  <table> " +
          "  <tr> " +
          "  <td> " +
          "  Next Step Webs, Inc.<br> " +
          "  12345 Sunny Road<br> " +
          "  Sunnyville, TX 12345 " +
          "  </td> " +
          "  <td> " +
          "  Acme Corp.<br> " +
          "  John Doe<br> " +
          "  [email protected] " +
          "  </td> " +
          "  </tr> " +
          "  </table> " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="heading"> ' +
          "  <td> " +
          "  Payment Method " +
          "  </td> " +
          "  <td> " +
          "  Check # " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="details"> ' +
          "  <td> " +
          "  Check " +
          "  </td> " +
          "  <td> " +
          "  1000 " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="heading"> ' +
          "  <td> " +
          "  Item " +
          "  </td> " +
          "  <td> " +
          "  Price " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="item"> ' +
          "  <td> " +
          "  Website design " +
          "  </td> " +
          "  <td> " +
          "  300 " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="item"> ' +
          "  <td> " +
          "  Hosting (3 months) " +
          "  </td> " +
          "  <td> " +
          "  75 " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="item last"> ' +
          "  <td> " +
          "  Domain name (1 year) " +
          "  </td> " +
          "  <td> " +
          "  10 " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="total"> ' +
          "  <td></td> " +
          "  <td> " +
          "  Total: $385.00 " +
          "  </td> " +
          "  </tr> " +
          "  </table> " +
          " </div>  " +
          "        </md-content>" +
          "    </md-dialog-content>" +
          '    <md-dialog-actions layout="row">' +
          "        <!-- for demo on how to print see https://jsfiddle.net/ozkary/3zu008ch/ -->" +
          '        <md-button class="md-raised md-primary" ng-click="closeDialog();">Close</md-button>' +
          '        <md-button class="md-raised md-primary" ng-click="print();">Print</md-button>' +
          "    </md-dialog-actions>" +
          "</md-dialog>",
        controller: "InvoiceController",
        onComplete: afterShowAnimation,
        locals: { employee: $scope.userName },
      });

      // When the 'enter' animation finishes...

      function afterShowAnimation(scope, element, options) {
        // post-show code here: DOM element focus, etc.
      }
    }
  }

  // Greeting controller used with the more complex 'showCustomGreeting()' custom dialog

  function InvoiceController($scope, $mdDialog) {
    $scope.print = function () {
      var contents = document.getElementById("print-section").innerHTML;
      var frame1 = document.createElement("iframe");
      frame1.name = "frame3";
      frame1.style.position = "absolute";
      frame1.style.top = "-1000000px";
      document.body.appendChild(frame1);
      var frameDoc = frame1.contentWindow
        ? frame1.contentWindow
        : frame1.contentDocument.document
        ? frame1.contentDocument.document
        : frame1.contentDocument;
      frameDoc.document.open();
      frameDoc.document.write(
        "<html><head> <style>md-dialog-actions{display:none}.invoice-box{max-width:800px;margin:auto;padding:30px;border:1px solid #eee;box-shadow:0 0 10px rgba(0,0,0,.15);font-size:16px;line-height:24px;color:#555}.invoice-box table{width:100%;line-height:inherit;text-align:left}.invoice-box table td{padding:5px;vertical-align:top}.invoice-box table tr td:nth-child(2){text-align:right}.invoice-box table tr.top table td{padding-bottom:20px}.invoice-box table tr.top table td.title{font-size:45px;line-height:45px;color:#333}.invoice-box table tr.information table td{padding-bottom:40px}.invoice-box table tr.heading td{background:#eee;border-bottom:1px solid #ddd;font-weight:700}.invoice-box table tr.details td{padding-bottom:20px}.invoice-box table tr.item td{border-bottom:1px solid #eee}.invoice-box table tr.item.last td{border-bottom:none}.invoice-box table tr.total td:nth-child(2){border-top:2px solid #eee;font-weight:700} </style>"
      );
      frameDoc.document.write("</head><body>");
      frameDoc.document.write(contents);
      frameDoc.document.write("</body></html>");
      frameDoc.document.close();
      setTimeout(function () {
        window.frames["frame3"].focus();
        window.frames["frame3"].print();
        document.body.removeChild(frame1);
      }, 500);
      return false;
      //window.print();
    };
    $scope.closeDialog = function () {
      // Easily hides most recent dialog shown...
      // no specific instance reference is needed.
      $mdDialog.hide();
    };
  }
})(angular);
 .invoice-box{
        max-width:800px;
        margin:auto;
        padding:30px;
        border:1px solid #eee;
        box-shadow:0 0 10px rgba(0, 0, 0, .15);
        font-size:16px;
        line-height:24px;
        font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color:#555;
    }
    
    .invoice-box table{
        width:100%;
        line-height:inherit;
        text-align:left;
    }
    
    .invoice-box table td{
        padding:5px;
        vertical-align:top;
    }
    
    .invoice-box table tr td:nth-child(2){
        text-align:right;
    }
    
    .invoice-box table tr.top table td{
        padding-bottom:20px;
    }
    
    .invoice-box table tr.top table td.title{
        font-size:45px;
        line-height:45px;
        color:#333;
    }
    
    .invoice-box table tr.information table td{
        padding-bottom:40px;
    }
    
    .invoice-box table tr.heading td{
        background:#eee;
        border-bottom:1px solid #ddd;
        font-weight:bold;
    }
    
    .invoice-box table tr.details td{
        padding-bottom:20px;
    }
    
    .invoice-box table tr.item td{
        border-bottom:1px solid #eee;
    }
    
    .invoice-box table tr.item.last td{
        border-bottom:none;
    }
    
    .invoice-box table tr.total td:nth-child(2){
        border-top:2px solid #eee;
        font-weight:bold;
    }
    
    @media only screen and (max-width: 600px) {
        .invoice-box table tr.top table td{
            width:100%;
            display:block;
            text-align:center;
        }
        
        .invoice-box table tr.information table td{
            width:100%;
            display:block;
            text-align:center;
        }
    }
   
 <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"
        crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<div ng-app="demoApp" ng-controller="PrintController">

                                                <md-button class="md-raised md-primary" ng-click="showPrint($event)">
                                                    Print Invoice
                                                </md-button>
                                            </div>
                        </div>

<div ng-app="demoApp" ng-controller="PrintController">

                                                <md-button class="md-raised md-primary" ng-click="showPrint($event)">
                                                    Print Invoice
                                                </md-button>
                                            </div>
                        </div>

Answer

I removed the ng-app for each button. The whole thing is one app.

(function (angular, undefined) {
  "use strict";

  angular
    .module("demoApp", ["ngMaterial"])
    .controller("PrintController", PrintDisplay)
    .controller("InvoiceController", InvoiceController);

  // Fictitious Employee Editor to show how to use simple and complex dialogs.

  function PrintDisplay($scope, $mdDialog) {
    var alert;

    $scope.showPrint = showInvoicePrint;

    function showInvoicePrint($event) {
      $mdDialog.show({
        targetEvent: $event,
        template:
          '<md-dialog  id="print-section" class="printSection">' +
          '    <md-dialog-content style="min-width:600px;">' +
          '        <md-content flex="" layout-padding="">' +
          ' <div class="invoice-box">  ' +
          '  <table cellpadding="0" cellspacing="0"> ' +
          '  <tr class="top"> ' +
          '  <td colspan="2"> ' +
          "  <table> " +
          "  <tr> " +
          '  <td class="title"> ' +
          "  </td> " +
          "  <td> " +
          "  Invoice #: 123<br> " +
          "  Created: January 1, 2015<br> " +
          "  Due: February 1, 2015 " +
          "  </td> " +
          "  </tr> " +
          "  </table> " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="information"> ' +
          '  <td colspan="2"> ' +
          "  <table> " +
          "  <tr> " +
          "  <td> " +
          "  Next Step Webs, Inc.<br> " +
          "  12345 Sunny Road<br> " +
          "  Sunnyville, TX 12345 " +
          "  </td> " +
          "  <td> " +
          "  Acme Corp.<br> " +
          "  John Doe<br> " +
          "  [email protected] " +
          "  </td> " +
          "  </tr> " +
          "  </table> " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="heading"> ' +
          "  <td> " +
          "  Payment Method " +
          "  </td> " +
          "  <td> " +
          "  Check # " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="details"> ' +
          "  <td> " +
          "  Check " +
          "  </td> " +
          "  <td> " +
          "  1000 " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="heading"> ' +
          "  <td> " +
          "  Item " +
          "  </td> " +
          "  <td> " +
          "  Price " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="item"> ' +
          "  <td> " +
          "  Website design " +
          "  </td> " +
          "  <td> " +
          "  300 " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="item"> ' +
          "  <td> " +
          "  Hosting (3 months) " +
          "  </td> " +
          "  <td> " +
          "  75 " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="item last"> ' +
          "  <td> " +
          "  Domain name (1 year) " +
          "  </td> " +
          "  <td> " +
          "  10 " +
          "  </td> " +
          "  </tr> " +
          '  <tr class="total"> ' +
          "  <td></td> " +
          "  <td> " +
          "  Total: $385.00 " +
          "  </td> " +
          "  </tr> " +
          "  </table> " +
          " </div>  " +
          "        </md-content>" +
          "    </md-dialog-content>" +
          '    <md-dialog-actions layout="row">' +
          "        <!-- for demo on how to print see https://jsfiddle.net/ozkary/3zu008ch/ -->" +
          '        <md-button class="md-raised md-primary" ng-click="closeDialog();">Close</md-button>' +
          '        <md-button class="md-raised md-primary" ng-click="print();">Print</md-button>' +
          "    </md-dialog-actions>" +
          "</md-dialog>",
        controller: "InvoiceController",
        onComplete: afterShowAnimation,
        locals: { employee: $scope.userName },
      });

      // When the 'enter' animation finishes...

      function afterShowAnimation(scope, element, options) {
        // post-show code here: DOM element focus, etc.
      }
    }
  }

  // Greeting controller used with the more complex 'showCustomGreeting()' custom dialog

  function InvoiceController($scope, $mdDialog) {
    $scope.print = function () {
      var contents = document.getElementById("print-section").innerHTML;
      var frame1 = document.createElement("iframe");
      frame1.name = "frame3";
      frame1.style.position = "absolute";
      frame1.style.top = "-1000000px";
      document.body.appendChild(frame1);
      var frameDoc = frame1.contentWindow
        ? frame1.contentWindow
        : frame1.contentDocument.document
        ? frame1.contentDocument.document
        : frame1.contentDocument;
      frameDoc.document.open();
      frameDoc.document.write(
        "<html><head> <style>md-dialog-actions{display:none}.invoice-box{max-width:800px;margin:auto;padding:30px;border:1px solid #eee;box-shadow:0 0 10px rgba(0,0,0,.15);font-size:16px;line-height:24px;color:#555}.invoice-box table{width:100%;line-height:inherit;text-align:left}.invoice-box table td{padding:5px;vertical-align:top}.invoice-box table tr td:nth-child(2){text-align:right}.invoice-box table tr.top table td{padding-bottom:20px}.invoice-box table tr.top table td.title{font-size:45px;line-height:45px;color:#333}.invoice-box table tr.information table td{padding-bottom:40px}.invoice-box table tr.heading td{background:#eee;border-bottom:1px solid #ddd;font-weight:700}.invoice-box table tr.details td{padding-bottom:20px}.invoice-box table tr.item td{border-bottom:1px solid #eee}.invoice-box table tr.item.last td{border-bottom:none}.invoice-box table tr.total td:nth-child(2){border-top:2px solid #eee;font-weight:700} </style>"
      );
      frameDoc.document.write("</head><body>");
      frameDoc.document.write(contents);
      frameDoc.document.write("</body></html>");
      frameDoc.document.close();
      setTimeout(function () {
        window.frames["frame3"].focus();
        window.frames["frame3"].print();
        document.body.removeChild(frame1);
      }, 500);
      return false;
      //window.print();
    };
    $scope.closeDialog = function () {
      // Easily hides most recent dialog shown...
      // no specific instance reference is needed.
      $mdDialog.hide();
    };
  }
})(angular);
 .invoice-box{
        max-width:800px;
        margin:auto;
        padding:30px;
        border:1px solid #eee;
        box-shadow:0 0 10px rgba(0, 0, 0, .15);
        font-size:16px;
        line-height:24px;
        font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        color:#555;
    }
    
    .invoice-box table{
        width:100%;
        line-height:inherit;
        text-align:left;
    }
    
    .invoice-box table td{
        padding:5px;
        vertical-align:top;
    }
    
    .invoice-box table tr td:nth-child(2){
        text-align:right;
    }
    
    .invoice-box table tr.top table td{
        padding-bottom:20px;
    }
    
    .invoice-box table tr.top table td.title{
        font-size:45px;
        line-height:45px;
        color:#333;
    }
    
    .invoice-box table tr.information table td{
        padding-bottom:40px;
    }
    
    .invoice-box table tr.heading td{
        background:#eee;
        border-bottom:1px solid #ddd;
        font-weight:bold;
    }
    
    .invoice-box table tr.details td{
        padding-bottom:20px;
    }
    
    .invoice-box table tr.item td{
        border-bottom:1px solid #eee;
    }
    
    .invoice-box table tr.item.last td{
        border-bottom:none;
    }
    
    .invoice-box table tr.total td:nth-child(2){
        border-top:2px solid #eee;
        font-weight:bold;
    }
    
    @media only screen and (max-width: 600px) {
        .invoice-box table tr.top table td{
            width:100%;
            display:block;
            text-align:center;
        }
        
        .invoice-box table tr.information table td{
            width:100%;
            display:block;
            text-align:center;
        }
    }
   
 <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"
        crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<div ng-app="demoApp">
          <div ng-controller="PrintController">

                                                <md-button class="md-raised md-primary" ng-click="showPrint($event)">
                                                    Print Invoice
                                                </md-button>
                                            </div>                 

<div  ng-controller="PrintController">

                                                <md-button class="md-raised md-primary" ng-click="showPrint($event)">
                                                    Print Invoice
                                                </md-button>
                                            </div>
                       
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *