5

Mam niestandardową dyrektywę myDirective, która wykonuje zadanie na elemencie.AngularJS dyrektywa wewnątrz ng-if nie będzie działać

mam tę dyrektywę w bloku ng-if

<div ng-if="condition"> 
    <div my-directive></div> 
</div> 

coś takiego skrzypce: http://jsfiddle.net/hGnvv/ tylko warunek ng-if zamienia się w prawdziwe po moim $http żądania są ładowane.

Dyrektywa jest prawdopodobnie kompilowana podczas uruchamiania, ale nigdy nie jest połączona, więc kod nigdy nie działa. Jeśli zastąpię ng-if przez ng-show, dyrektywa działa poprawnie.

Jakieś rozwiązania?

Edytuj: Nie mogę użyć ng-show, ponieważ w formularzu mam 130 dyrektyw. 20 dyrektyw działa, a drugi działa zgodnie z moim typem obiektu.

  • ng-if="type == 1" następnie załadować te elementy
  • ng-if="type == 2" następnie załadować inne elementy itd

Jeśli zmienię ng-if do ng-show, forma trwa 8s załadować zamiast 1s.

+4

Masz już rozwiązanie.Zamień ng-if z ng-show – nikhil

+0

Nie mogę tego zrobić, mam 130 dyrektyw w jednym formularzu. Jeśli zamieniam ng-if na ng-show, cały ten kod, który musi działać, znacznie wolniej (8 s zamiast ~ 1s). –

+2

Użyj ng-show, jeśli to możliwe. Ng-if usuwa element z DOM, więc nie ma sposobu, aby go skompilować. –

Odpowiedz

2

Problem nie polegał na tym, że dyrektywa nie była uruchomiona, ale funkcje $watch, które miałem w środku, nie działały wcale. Nie udało mi się zrozumieć dokładnej przyczyny problemu, ponieważ ta sama dyrektywa działa dobrze poza numerem ng-if.

W każdym razie zmieniłem mój $watch na ->$watchCollection i teraz działa dobrze, ponieważ widzi wszystkie aktualizacje obiektów, które obserwuję.

2

Warunek ng-if jest początkowo fałszywy, dlatego element nie istnieje w DOM, a dyrektywa nie została powiązana.

Gdy ng-jeśli warunek później staje true, link zwrotna powinna ogień prawidłowo, co widać na poniższych przykładach:

Ustawianie ng-if true gdy kliknięciu przycisku: http://jsfiddle.net/q05gret0/

Ustawianie ng-if true po $http żądanie jest ładowane: http://jsfiddle.net/fhu8ky62/1/

Jeśli nie otrzymujesz takiego zachowania, problem może dotyczyć dziedziczonego zakresu; sprawdź, czy ng-if monitoruje tę samą zmienną zasięgu, którą aktualizuje Twoje żądanie. This article ma kilka punktów na cieniach zmiennych rodzica/dziecka i innych ograniczeniach.

+0

Chcę uruchomić kod, gdy warunek ng-if staje się prawdziwy. Problem polega na tym, że kiedy to się dzieje, link do dyrektywy nie działa. –

+0

Ah Rozumiem teraz, będę edytować moją odpowiedź – seanhodges

+0

Dzięki za pomoc, to nie był problem. Udało mi się go znaleźć, umieszczając go w innej odpowiedzi poniżej. –

0

na przykład, jeśli twój model jest jak $scope.item = true i używać go jak ng-if="item" powinieneś zmienić swój model do $scope.myvalue = {} i używać tak: ng-if="myvalue.item", w ogóle znaczy należy użyć właściwości obiektu dla ng-if nie jest prostym wartości