已编译页面中的新绑定

Question

我在 angular 中使用 footable 插件时遇到问题，问题是 footable 将新的 table 行附加到我的 table，但它粘贴原始 html 文本而不是 angular 替换值，我的意思是 {{ 'COMMENT'|翻译}}而不是 'Comment'（参见 'appended table image'）

appended table image

我添加了点击事件，以执行重新评估的特殊操作，但我不确定如何重新绑定元素 HTML。

Table html

<th data-hide="phone,tablet" >{{'QUANTITY'| translate}}</th>
...
<tr ng-repeat="item in items | filter:itemsFilter"  on-last-repeat ng-click="rowExpanded($event)" >
   <td>{{item.Stock}}</td>
   ...
</tr>

如果您需要更多信息，请立即联系我。我很困惑，尝试谷歌搜索，但我不知道我的问题的术语。

编辑：在我看来，footable 在 init 上缓存 table headers，然后重用那些尚未被 angular 编译的值，也许这可能有助于找到答案。

问题是 angular 不知道详细信息行的存在，并且其中的绑定不会被值替换

expanded first row with console view

Answer 1

试着隔开你的翻译语句，而不是

{{'COMMENT'|translate}}

尝试

{{ 'COMMENT' | translate }}

Answer 2

我发现，我需要重新编译附加到 footable 的下一个元素，我在 table 行上添加了 ng-click：

<tr ng-repeat="item in items | filter:itemsFilter"  on-last-repeat ng-click="rowExpanded($event)" >

然后在控制器中，我发现 currentTarget.nextElementSibling 将 return，下一个 table 行，恰好是未编译的新详细信息行，所以 $compile 可以解决问题.然而，当行已经展开并且 window 正在调整大小时，这不起作用，在详细信息行中添加的列将采用 {{variablename}} 语法。但我想我可以忍受这个缺点

$scope.rowExpanded = function($event){
    $timeout(function(){
        console.log($event.currentTarget.nextElementSibling);
        $compile($event.currentTarget.nextElementSibling)($scope);
    });

};

编辑：好的，当我使用模板时，这不起作用。因为当 footable 读取数据时，它只是一堆 div，当我要求 angular 编译它们时，它无法编译，因为一堆 div 不是 >progressbar<

但是，我找到了另一个解决方案，在 angular 端完成所有操作后，我延迟了 footable 初始化：

TL;DR; 我从 table 中删除了 class 'footable' 所以它不会自动初始化并调用 .footable() 仅在所有 ng-repeat 行添加（并编译）到 table 之后才在 table 元素上。这解决了我目前所有的 footable/angular 关系问题。

已编译页面中的新绑定

New bindings in already compiled page

binding

angularjs

footable