Question

我试图通过针对预定义范围编译视图并运行$ scope来测试我的一个模板中的ng-if。$ digest。

我发现无论我的条件是真实的还是假的，编译后的模板都是一样的。我希望编译的html在falsy时删除ng-if dom元素。

beforeEach(module('templates'));
beforeEach(inject(function($injector, $rootScope){
    $compile = $injector.get('$compile');
    $templateCache = $injector.get('$templateCache');
    $scope = $rootScope.$new();
    template = angular.element($templateCache.get('myTemplate.tpl.html'));
}));

afterEach(function(){
    $templateCache.removeAll();
});

it ('my test', function(){
    $scope.myCondition = true;
    $compile(template)($scope);
    $scope.$digest();


    expect(template.text()).toContain("my dom text");
    // true and false conditions both have the same effect
});

这是一个试图表明发生了什么的傻瓜（不确定如何在plunkr中测试，所以我已经在控制器中完成了它）http://plnkr.co/edit/Kjg8ZRzKtIlhwDWgB01R?p=preview

Answer 1

当ngIf放置在模板的根元素上时，会出现一个可能的问题 ngIf删除节点并在其中放置注释。然后它监视表达式并根据需要添加/删除实际的HTML元素。问题似乎是如果将它放在模板的根元素上，那么单个注释就是整个模板留下的内容（即使只是暂时的），这会被忽略（我不确定这是否是浏览器 - 特定行为），导致模板为空。

如果情况确实如此，您可以将ngIf ed元素包装在<div>中：

<div><h1 ng-if="test">Hello, world !</h1></div>

另请参阅此 short demo 。

另一个可能的错误是以空白模板结束，因为它不在$templateCache中。即如果你没有明确地将它放入$templateCache，那么下面的代码将返回undefined（导致一个空元素）：

$templateCache.get('myTemplate.tpl.html')

测试ng-if使用$ compile

1 个答案: