Thử nghiệm ng-nếu sử dụng $ compile

Question

Tôi đang cố gắng kiểm tra ng-if trong một trong các mẫu của tôi bằng cách biên dịch khung nhìn dựa vào phạm vi được xác định trước và chạy phạm vi $. $ Digest.

Tôi nhận thấy rằng mẫu đã biên dịch sắp xuất hiện bất kể điều kiện của tôi có đúng hay sai. Tôi mong đợi các biên dịch html loại bỏ các yếu tố ng-nếu dom khi falsy.

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 
}); 

Dưới đây là một plunkr cố gắng để hiển thị những gì đang xảy ra (không chắc chắn làm thế nào để kiểm tra trong plunkr, vì vậy tôi đã thực hiện nó trong một bộ điều khiển) http://plnkr.co/edit/Kjg8ZRzKtIlhwDWgB01R?p=preview

Answer 1

Một vấn đề có thể nảy sinh khi các ngIf được đặt trên phần tử gốc của mẫu.
ngIf xóa nút và đặt nhận xét vào vị trí của nút đó. Sau đó, nó theo dõi biểu thức và thêm/xóa phần tử HTML thực tế nếu cần. Vấn đề có vẻ là nếu nó được đặt trên phần tử gốc của khuôn mẫu, thì một chú thích duy nhất là những gì còn lại trong toàn bộ khuôn mẫu (ngay cả khi chỉ tạm thời), được bỏ qua (tôi không chắc đây có phải là trình duyệt hay không) hành vi cụ thể), dẫn đến một mẫu trống.

Nếu đó thực sự là trường hợp, bạn có thể bọc yếu tố ngIf ed của bạn trong một <div>:

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

---

Xem, cũng, đây short demo.

---

Một lỗi có thể khác có thể kết thúc bằng mẫu trống, vì nó không có trong $templateCache. I E. nếu bạn không đặt nó vào $templateCache exlicitly, sau đó đoạn mã sau sẽ trở lại undefined (kết quả vào một phần tử rỗng):

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