Question

我正在为我的网站创建一个打印页面：http://vivule.ee/0/print

我想在页面加载时启动window.print()。我尝试了不同的方法，但都没有成功。我知道这是可能的，因为我可以监听已完成的Ajax调用，但是如何在Angular中完成？

我的信息路径：HTML-＆gt; angular-＆gt; php-＆gt; mysql table-＆gt; php-＆gt; json-＆gt; angular-＆gt; HTML

Answer 1

你可以使用$ viewContentLoaded 每次重新加载ngView内容时都会发出。检查此[link]：https://docs.angularjs.org/api/ngRoute/directive/ngView 如果要加载ngView，可以使用此事件确保视图已完全加载。

 $scope.$on('$viewContentLoaded', function(){
    $window.print();
  });

Answer 2

好的，通过使用promises，$ watch，$ timeout和setTimeout

来实现这一点

关于承诺： http://andyshora.com/promises-angularjs-explained-as-cartoon.html

关于angular $ watch： How do I use $scope.$watch and $scope.$apply in AngularJS?

你可以看到它在这里工作： http://vivule.ee/0/print

这是我最终得到的野兽（检查代码中的评论）：

if($routeParams.print){

    //Set variable for $watch to listen
    $scope.game = null;

    //Start script only after angular has changed content in ng-view
    $scope.$on('$viewContentLoaded', function(){

        //Listen to $scope.game variable change
        $scope.$watch('game', function(newVal, oldVal){

            //Force angular not to fire script on load
            if(newVal != oldVal) {

                //Force script to run AFTER ng-repeat has rendered its things to the DOM
                $timeout(function(){

                    //And finally setTimout to wait for browser to render the custom fonts for print preview
                    setTimeout(function(){

                        //Print document
                        window.print();
                        //window.close();
                    }, 100);
                }, 0);
            }
        }, true);
    });
}

Answer 3

当promise（Ajax）解决后，你可以设置一个标志

像 getApplication.then（function（response）{//做一些事情 $ scope.isApplicaionLoaded = true; }）;

在UI中您可以使用标志 NG-显示=＆＃34; isApplicaionLoaded＆＃34;

如何检测内容何时加载？

3 个答案: