angular $compile 一次潜水，里面有 ng-repeat

Question

我有以下问题：

我有一些表格可以使用 angular 和 ng-repeat 自动生成：

<article id="search-performance-table" class="container-fluid istable">
            <div class="printOptionElements printshow newpage size100"></div>
            <!-- Start Table Simple-->
            <section class="row">
                <div class="col-md-12">
                    <div class="table-responsive" ng-controller="SmartTableController">

                        <table id="table-performance-suche" class="table table-hover" st-table="displayed" st-safe-src="tablePerformanceSearch">
                            <thead>
                                <tr class="active">
                                    [... Header Elements ...]
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="element in displayed">
                                    <td>{{element.date| date}}</td>
                                    <td>{{element.requests| number:0}}</td>
                                    <td>{{element.clicks| number:0}}</td>
                                    <td>{{element.clickRate| percentage:2}}</td>
                                    <td>{{element.carts| number:0}}</td>
                                    <td>{{element.buys| number:0}}</td>
                                    <td>{{element.conversionRate| percentage:2}}</td>
                                    <td>{{element.responseTime| number:2}} ms</td>
                                </tr>
                            </tbody>
                            <tfoot class="font-blue-grey-light" ng-model="tablePerformanceSearchTotal">
                                <tr class="active">
                                [... Footer Elements ...]
                                <tr>
                                    <td colspan="12" class="text-center">
                                        <div st-pagination="" st-items-by-page="$root.itemsByPage1_table1" st-displayed-pages="7"></div>
                                    </td>
                                </tr>
                            </tfoot>

                        </table>
                    </div>
                </div>
            </section>
            <!-- Ende Table Simple -->
        </article>

现在我想在这张桌子上生成一个打印视图。为此，我复制了文章元素，将其放在一个数组中并将其附加到所属的纸张上。例如我想要第3页的表格，我将其复制并粘贴到元素$("#site1")上。

pageElements[pageNumber][elementOnPage] = "<div id='"+this.parentNode.id+"' class='thisIs100 printPaper'>"+$("#"+this.parentNode.id).html()+"</div>";

for (j=0; j < pageElements.length; j++) {
            for (i=0; i < pageElements[j].length; i++) {
                $("#site"+j).append(""+pageElements[j][i]+"");
            }
        }

现在我有我的文件，里面有元素。旧元素被隐藏。但是 angular 不起作用，因为它不在 $scope 中。我将元素编译到作用域中。

$( ".printOptionElements" ).each(function( index ) {
            var parentid = this.parentNode.id;
            $compile($("#"+parentid).children().not(".printOptionElements"))($scope);
            $scope.$apply();
        });

这适用于页脚中的简单角度变量，但 ng-repeat 不起作用。我只得到：

<tbody>
                                <!-- ngRepeat: element in displayed -->
                            </tbody>

有没有办法解决这个问题？在编译元素后，我尝试使用$scope.$digest() 或$apply()。但它不起作用。

我希望有人可以帮助我。

Answer 1

我认为当你在 Angular 中使用 JQuery 时，你必须用 JQuery 替换 $ 尝试：

pageElements[pageNumber][elementOnPage] = "<div id='"+this.parentNode.id+"' class='thisIs100 printPaper'>"+jQuery("#"+this.parentNode.id).html()+"</div>";

for (j=0; j < pageElements.length; j++) {
            for (i=0; i < pageElements[j].length; i++) {
                jQuery("#site"+j).append(""+pageElements[j][i]+"");
            }
        }

还有：

jQuery( ".printOptionElements" ).each(function( index ) {
            var parentid = this.parentNode.id;
            $compile(jQuery("#"+parentid).children().not(".printOptionElements"))($scope);
           if(!$scope.$$phase){
                 $scope.$apply();
           }
        });

先试试看好不更好？ :)

你在控制台能看到什么？ 带有 $scope 变量的部分在控制器中？