在角度载荷值之前渲染打印功能？

Question

我需要在第一张图片上获取值，但是当我调用print函数时，我会在第二张图片上得到这个。我试过了

 angular.element(document).ready(function(){
$window.print
});

我还尝试使用ng-binding和ng-cloak，但我总是得到第二张图片上的结果

我有一个页面，我有这个按钮：

我有控制器我在哪里：

 $scope.printFunction = function ()
    {
        localStorage.setItem("payoutTime", $scope.testpayoutTime);
        localStorage.setItem("payoutAmount", $scope.testpayoutAmount);
        localStorage.setItem("pin", $scope.testticketPin);

        $window.open("/print");

    }

当此视图打开时，我在该视图上有此控制器：

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

        $window.print();

如何在打印功能之前渲染此变量？

Answer 1

存在问题。这是一场激烈的竞赛：无论发生什么事情，首先获胜。有时它是渲染，有时是

我们可以使用setTimeout（）轻微破解。

 $scope.printFunction = {
afterRender: function () {
         localStorage.setItem("payoutTime", $scope.testpayoutTime);
         localStorage.setItem("payoutAmount", $scope.testpayoutAmount);
         localStorage.setItem("pin", $scope.testticketPin);

         $window.open("/print");
    },

    render: function () {
        //Render Your template
        setTimeout(this.afterRender.bind(this), 0);
    }
}

<强>更新

有一些解决方案。代码需要知道值何时发生了变化。

现在，我们的代码无法直接通知对象的更改。

相反，有两种主要策略。

1. 一种策略是使用特殊对象，通过它设置数据 方法，而不是财产分配。然后可以注意到变化， 并且页面可以更新。这有一个缺点，我们必须 扩展一些特殊的对象。另外，对于分配，我们必须使用更多 详细形式obj.set（＆＃39; key＆＃39;，＆＃39; value＆＃39;）而不是obj.key =＆＃39; value＆＃39;。
2. AngularJS采用不同的方法：允许使用任何值 绑定目标。然后在任何JavaScript代码结束时，检查 查看值是否已更改。这看起来似乎不合适， 但是有一些聪明的策略可以降低性能。 最大的好处是我们可以使用普通对象并更新我们的数据 但是我们想要，并且会发现并反映出这些变化 我们的绑定。

Demo JS FIDDLE

为了使这个策略有效，我们需要知道数据何时可能发生变化，这就是$ scope。$ apply的用法。

我希望得到帮助