inside angularjs app, want inject generated content inside printdiv on on event. printdiv styled using , should displayed on print only.
below code snippet:
@media print { body > #printdiv{ display:block; } body > #screencontent{ display:none; } } @media screen { body > #printdiv { display: none; } body > #printcontent{ display:block; } } on event (ng-click) below example calls function generatecontent() on controller.
$scope.generatecontent = function () { $("#divone").text(data.firstname); $("#divtwo").text(data.lastname); ... $scope.print(); } here, tried fetch injected content using plain js , printed using window.print() below:
$scope.print = function () { var content = document.getelementbyid("printcontent").innerhtml; document.getelementbyid('printdiv').innerhtml = content; window.print(); } and, on html page div structure below:
<html> <body> <div id="screencontent"> // html content screen </div> <div id="printdiv"></div> <div id="printcontent"> <div id="divone"></div> <div id="divtwo"></div> </div> </body> </html> on first attempt content generated correctly , printed well. on every other attempt content not injected, prints content generated on first attempt.
is correct way of injecting , printing div using angularjs spa? how can example fixed work in expected manner?
update:
i tried ng-bind instead of using jquery this
<div id="printcontent" ng-controller="mycontroller"> <div id="divone" ng-bind="firstname"></div> <div id="divtwo" ng-bind="lastname"></div> </div> and inside controller
$scope.firstname = data.firstname; $scope.lastname = data.lastname; but doesnt inject dom.
i tried ng-model instead of ng-bind doesnt work.
update 2
mycontroller (function () { "use strict"; app.controller('mycontroller', .... $http({ method: 'post', url: '/someservice', data: ...., }).success(function (data) { $scope.firstname = data.firstname; $scope.lastname = data.lastname; } }); ... }()); update 3
<div id="printdiv"> <div id="printcontent" ng-app="myapp" ng-controller="mycontroller"> <div id="divone" ng-bind="data.firstname"></div> <div id="divtwo" ng-bind="lastname"></div> </div> </div> mycontroller code
angular.module('myapp', []) .controller('mycontroller', function ($scope) { $scope.firstname: "bob"; $scope.lastname: "smith"; window.print(); }); i'm calling window.print print content inside printdiv elements binded controller properties, yet not working. when inside firebug content not binded @ (html structure looks ok ng-bing, there no actual content binded element).
what i'm doing wrong here?
can't tell disconnected bits , pieces you're going off track (where generatecontent located relative else example?) here simple example of controller doing you're asking without jquery:
dom:
<div ng-app="foo"> <div id="printcontent" ng-controller="democontroller"> <div id="divone" ng-bind="data.firstname"></div> <div id="divtwo" ng-bind="data.lastname"></div> </div> </div> controller:
angular.module('foo', []) .controller('democontroller', function ($scope) { $scope.data = { firstname: "bob", lastname: "smith" }; }) 
Comments
Post a Comment