$ digest渲染ng-repeat作为评论

Question

我正在编写一个指令测试，在执行测试时，模板（正确加载）的呈现方式与<!-- ng-repeat="foo in bar" -->

一样

对于初学者来说，代码的相关部分：

测试

...

beforeEach(inject(function ($compile, $rootScope, $templateCache) {

    var scope = $rootScope;
    scope.prop = [ 'element0', 'element1', 'element2' ];

    // Template loading, in the real code this is done with html2js, in this example
    // I'm gonna load just a string (already checked the problem persists)
    var template = '<strong ng-repeat="foo in bar"> <p> {{ foo }} </p> </strong>';
    $templateCache.put('/path/to/template', [200, template, {}]);

    el = angular.element('<directive-name bar="prop"> </directive-name>');
    $compile(el)(scope);
    scope.$digest(); // <--- here is the problem
    isolateScope = el.isolateScope();

    // Here I obtain just the ng-repeat text as a comment
    console.log(el); // <--- ng-repeat="foo in bar" --> 
}));

...

---

指令

该指令相当简单，并不是问题（在测试之外一切正常）：

app.directive('directiveName', function () {
    return {
        restrict : 'E',
    replace : true,
    scope : {
        bar : '='
    },
    templateUrl : '/path/to/template', // Not used in this question, but still...
});

更多细节：

• 该指令在测试之外，工作正常
• 如果我将模板更改为更简单的内容，例如：<h3> {{ bar[0] }} </h3>，测试工作正常
• 正确加载rootScope
• isolateScope结果为undefined

Answer 1

如果您查看角度为ng-repeat创建的生成输出，您将在html中找到注释。例如：

<!-- ngRepeat: foo in bars  -->

这些注释是由编译函数创建的 - 请参阅角度源：

document.createComment(' ' + directiveName + ': '+templateAttrs[directiveName]+' ')

如果致电console.log(el);，您所得到的就是创建的评论。如果以这种方式更改输出，则可以检查此项：console.log（el [0] .parentNode）。你会看到有很多childNodes：

如果您在测试之外使用该指令，则您将不会意识到此问题，因为您的元素directive-name将被完整创建的DocumentFragment替换。解决问题的另一种方法是使用包装元素作为指令模板：

<div><strong ng-repeat="foo in bar"> <p> {{ foo }} </p> </strong></div>

在这种情况下，您可以访问div元素。