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>