Testowanie ng-jeśli używam $ compile

Question

Próbuję przetestować ng-if w jednym z moich szablonów, kompilując widok przeciwko predefiniowanemu zakresowi i uruchamiając $ scope. $ Digest.

Zauważyłem, że skompilowany szablon wychodzi tak samo, niezależnie od tego, czy mój stan jest zgodny z prawdą, czy nie. Spodziewam się, że skompilowany html usunie elementy ng-if dom, gdy są fałszywe.

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

Oto plunkr próbuje pokazać, co się dzieje (nie wiem, jak testować w plunkr, więc zrobiłem to w kontrolerze) http://plnkr.co/edit/Kjg8ZRzKtIlhwDWgB01R?p=preview

Answer 1

Jednym z możliwych problem powstaje, gdy ngIf jest umieszczona na element główny szablonu.
ngIf usuwa węzeł i umieszcza komentarz w jego miejscu. Następnie sprawdza nad wyrażeniem i dodaje/usuwa rzeczywisty element HTML w razie potrzeby. Problem wydaje się, że jeśli jest umieszczony na głównym elemencie szablonu, to pojedynczy komentarz jest tym, co pozostało z całego szablonu (nawet jeśli tylko tymczasowo), który zostaje zignorowany (nie jestem pewien, czy to przeglądarka). określone zachowanie), co spowoduje pusty szablon.

Jeśli tak jest w istocie, można owinąć elementu ngIf ed w <div>:

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

---

Patrz także ten short demo.

---

Innym możliwym błędzie kończy z pustego szablonu, ponieważ nie jest obecny w $templateCache. To znaczy. jeśli nie umieścić go w $templateCache exlicitly, to poniższy kod powróci undefined (wynikająca do pustego elementu):

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