angularjs - 使用 $compile 测试 ng-if

Question

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

我发现无论我的条件是真还是假，编译出来的模板都是一样的。我希望编译的 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 试图显示正在发生的事情(不确定如何在 plunkr 中测试，所以我在 Controller 中完成了) http://plnkr.co/edit/Kjg8ZRzKtIlhwDWgB01R?p=preview

Answer 1

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

如果确实如此，您可以包装您的 ngIf <div> 中的 ed 元素:

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

另见此 short demo .

另一个可能的错误是以空白模板结尾，因为它不存在于 $templateCache 中。 . IE。如果你不把它放进 $templateCache明确，那么下面的代码将返回 undefined (导致一个空元素):

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