【问题标题】:print function is calling before partial view在局部视图之前调用打印函数
【发布时间】:2015-07-29 22:01:25
【问题描述】:

我想做的是在新窗口中打开部分视图并调用打印函数,但问题是部分视图在打印函数之后呈现,所以我总是得到一个空白页。我尝试了$timeout 函数,但得到了相同的结果。目前,我有这个,但这是一个 hacky 解决方案,我不喜欢它:

$scope.print = function() {
    setTimeout(function() {
        print()
    }, 1000);
}

这是我尝试打开的页面的 html:

<div id="printWrapper" style="background-color:white;" ng-controller="accountContentController" ng-init="print()">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <!-- HEADER -->
        <tr>
            <td>

                <img id="imgLogo" src="@Model.TicketPayOut.Logo" />


            </td>
        </tr>
        <!--HEADER-->
        <tr>
            <td>
                <label id="lblTerminalId" class="left-position padding-top-3 padding-left-3 text-style">@Translator.Translate("TERMINAL")</label>
                <span class="left-position padding-top-3 text-style">:</span>
                <label id="lblTerminalIdValue" class="left-position padding-top-3 padding-left-3 text-style"></label>

                <div style="clear:both"></div>

                <label id="lblTerminalName" class="left-position padding-left-3 text-style">@Translator.Translate("BET_OFFICE")</label>
                <span class="left-post text-style">:</span>
                <label id="lblTerminalNameValue" class="left-position padding-left-3 text-style"></label>

                <label id="lblTerminalCityAddress" class="left-position padding-left-3 text-style" style="clear:both;"></label>

                <label id="lblCompanyInfo" class="center-position text-style" style="clear:both;"></label>
                <label id="lblCompanyAddress" class="center-position text-style" style="clear:both;"></label>
                <label id="lblCompanyId" class="center-position text-style" style="clear:both;"></label>

            </td>
        </tr>

        <tr>
            <td class="border-top border-bottom">
                <div style="padding:10px 0;">
                    <label id="lblStornoMessage" class="center-position text-style">@Translator.Translate("PAYOUT_CONFIRMATION")</label>
                </div>
            </td>
        </tr>
        <tr>
            <td class="border-bottom">

                <div style="height:25px;padding:10px 3px 0 3px;">
                    <label id="lblPayoutTicket" class="left-position text-style">@Translator.Translate("PAYOUT_TICKET")</label>
                    <label id="lblPinValue" class="right-position text-style">{{payoutTime | date: dateFormat }}</label>

                </div>
            </td>
        </tr>
        <tr>

            <td>
                <div style="padding:5px 3px;">

                    <label id="lblPinTicket" class="left-position text-style">@Translator.Translate("PIN")</label>
                    <label id="lblPinReturnValue" class="right-position text-style">{{ticketPin}}</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="padding:5px 3px;">
                    <label id="lblPayinReturn" class="left-position text-style">@Translator.Translate("PAYOUT_AMOUNT")</label>
                    <label id="lblPayinReturnValue" class="right-position text-style">{{payoutAmount}}</label>
                </div>

            </td>
        </tr>


        <tr>
            <td class="border-bottom">
                <div style="padding:25px 3px 5px 3px;">
                    <label id="lblCreatedBy" class="left-post text-style">@Translator.Translate("CREATED_BY")</label>
                    <label id="lblCreatedByValue" class="right-position text-style">@User.Identity.Name</label>

                </div>
            </td>
        </tr>
    </table>
</div>

这是我有打印选项的页面上的按钮:

  <div class="mr-10">
                    <div class="pull-right padding-8 mt5 col-lg-2 col-md-2">
                        <input type="submit" value="@Translator.Translate("CANCEL")" class="btn btn-block secondary-button save-changes padding-8" ng-click="CancelPayOutTicket(ticketPin)" />
                    </div>
                    <div class="pull-right padding-8 mt5 col-lg-2 col-md-2">
                        <input type="submit" value="@Translator.Translate("PAYOUT")" class="btn btn-block save-changes padding-8" ng-class="{'secondary-button':TicketsPayout.BettingSlipResult.TicketHolder.PayoutEnabled==true,'disabled_button':TicketsPayout.BettingSlipResult.TicketHolder.PayoutEnabled==false}" ng-disabled="TicketsPayout.BettingSlipResult.TicketHolder.PayoutEnabled==false" ng-click="FinishTicketPayout(ticketPin);ConfirmTicketPayOut(ticketPin,'@username')"/>
                    </div>
                 </div>

有什么办法可以避免setTimeout 函数,只在新窗口中调用打印函数并用数据填充部分视图?

编辑:角度控制器:

$scope.CheckTicket = function (ticketPin) {


           if (ticketPin != null && ticketPin != "" && ticketPin != undefined) {
            var promise = accountDataProviderService.checkTicketPayout(ticketPin);

            $scope.checkPromise = promise;

            promise.then(
           function (response) {
               $scope.showTicketPayout = true;
               $scope.TicketsPayout = response;

           },
         function (err) {
             $scope.showTicketPayout = false;
             $scope.ticketNotFound = true;
             $timeout(function ()
             {
                 $scope.ticketNotFound = false;
             }, ticketNotFound * 1000);
         });

        }
    }
    $scope.CloseMessage = function ()
    {
        $scope.ticketNotFound = false;
    }
    $scope.FinishTicketPayout = function (ticketPin)
    {


        accountDataProviderService.finishTicketPayOut(ticketPin)
        .then(function (response) {
            $scope.finishTicketPayOut = response;
            localStorage.setItem("payoutTime", $scope.finishTicketPayOut.PayoutTime);
            localStorage.setItem("payoutAmount", $scope.finishTicketPayOut.PayoutAmount);

        });

    }

    $scope.ConfirmTicketPayOut = function (ticketPin, username) {
        $scope.ticketPin = ticketPin;
        localStorage.setItem("pin", ticketPin);
       accountDataProviderService.confirmTicketPayOut(ticketPin, username)
        .then(function (response) {

            $scope.confirmTicketPayOut = response;
            if ($scope.confirmTicketPayOut.Result == true) {

                var newWindow = window.open("/print")

            }
        });
        localStorage.clear();
    }

【问题讨论】:

  • 我不明白你想要什么......但也许你应该做出承诺并等待它解决。请发布更多代码...
  • @messerbill 点击我想打开新窗口并用数据填充它并调用打印功能但在我的情况下它打开新窗口它调用打印功能然后填充数据所以我得到空白页.. ..你现在清楚了吗?
  • 为什么不在其他站点的 Angular 控制器中调用打印功能?您也可以通过其他站点的$(document).ready() 函数来执行此操作。您通过target="_blank" 在另一个窗口中打开一个链接,这是您要搜索的内容吗?
  • 我试图在另一个站点调用它,但我再次需要 setTimeout,因为它在打印功能后呈现部分视图,并且我再次得到空白页
  • 请张贴两个网站的代码或制作小提琴

标签: javascript angularjs


【解决方案1】:

让数据在你的控制器中“打包”一个承诺:

angular.module("printModule").controller('printController', ['$scope', '$window', '$q', function ($scope, $window, $q) { 


$scope.ticketPin = localStorage.getItem("pin"); 
$scope.payoutTime = localStorage.getItem("payoutTime"); 
$scope.payoutAmount = localStorage.getItem("payoutAmount"); 

var defer = $q.defer(); 
defer.resolve($scope.ticketPin); 
defer.resolve($scope.payoutTime); 
defer.resolve($scope.payoutAmount); 

defer.promise.then(function () { 
    $window.print(); 
}) 
}]);

祝你有美好的一天;)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-05-30
    • 2020-07-09
    • 2017-06-11
    • 1970-01-01
    • 2016-11-13
    • 2018-11-15
    • 1970-01-01
    • 2021-03-14
    相关资源
    最近更新 更多