Question

我在$ compile中遇到了一个小问题。我有一些像这样的HTML代码：

<ul>
 <li ng-repeat="tutorial in tutorials" ng-click="viewTutorial(tutorial.identifier)">{{tutorial.title}}</li>
</ul>

这会产生：

测试
的Test2
Test3的
TEST4

现在ng-click不起作用，因为我使用javascript（jquery）来做

$('#test').html("my html with angular in it");

使用$ compile我得到点击工作：

var scope = angular.element('#test').scope();
var html = scope.compileAngular("my html with angular in it")
scope.$apply();
$('#test').html(html);

这将导致ng-click工作，但html看起来像这样：

测试
测试
测试
测试
的Test2
的Test2
的Test2
的Test2
Test3的
Test3的
Test3的
Test3的
TEST4
TEST4
TEST4
TEST4

因此每个项目都会重复数组的大小来循环。

我记录了$ compile生成的html，它显示了这个：

<ul>
     <li ng-repeat="tutorial in tutorials" ng-click="viewTutorial(tutorial.identifier)">{{tutorial.title}}</li>
<li ng-repeat="tutorial in tutorials" ng-click="viewTutorial(tutorial.identifier)">{{tutorial.title}}</li>
<li ng-repeat="tutorial in tutorials" ng-click="viewTutorial(tutorial.identifier)">{{tutorial.title}}</li>
<li ng-repeat="tutorial in tutorials" ng-click="viewTutorial(tutorial.identifier)">{{tutorial.title}}</li>
    </ul>

$ compile是否已经生成了最终的DOM？我应该过滤掉ng-repeat或其他东西吗？

有关如何解决此问题的任何帮助或任何提示点击工作的任何提示将不胜感激。

Answer 1

我解决了这个问题，这不是角度$ compile的问题而是jquery的$(element).html()返回多个ng-repeat，所以错误的html。

Answer 2

如先前的答复中所述，问题与$.html()返回错误代码有关。就我而言，这是由于重复编译相同的HTML而导致的，从而导致添加了新的复制角度注释。为了解决这个问题，我将生成的已编译的html存储在一个变量中，在重新编译它之前，我使用$删除了这些元素。

基本上：

var html = $compile($(attr.ngTarget).html())(scope); // store result
...
$(html).remove(); // clear compiled before recompiling
html = $compile($(attr.ngTarget).html())(scope);

angularjs $ compile生成ng-repeat重复行

2 个答案: