在角度加载值之前呈现打印功能？

Question

我需要在第一张图片上获取值，但是当我调用打印函数时，我在第二张图片上得到了类似的值。我试过了

 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");

    }

当这个 view 打开时，我在那个视图上有这个控制器：

  $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('key', 'value') 而不是 obj.key = 'value'。
2. AngularJS 采用不同的方法：允许将任何值用作 一个绑定目标。然后在任何 JavaScript 代码循环结束时，检查 查看值是否已更改。乍一看，这似乎是无能为力的， 但是有一些巧妙的策略可以减少对性能的影响。 最大的好处是我们可以使用普通对象并更新我们的数据 无论我们想要什么，这些变化都会被注意到并反映在 我们的绑定。

Demo JS FIDDLE

要使这种策略发挥作用，我们需要知道数据何时可能发生变化，这就是 $scope.$apply 发挥作用的地方。

希望对你有所帮助