angulaire Les éléments ne sont pas rafraîchissant après le glissement avorté & drop

Question

je la Liste angulaire suivant (réduit le contenu pour le rendre plus lisible):

<div ng-repeat="element in bigBlock.Elements track by $index" 
         class="singleBlockElement" 

         ng-drop="dragSource=='Block'" 
         ng-drop-success="To($index, $data, bigBlock)"> 
         <div class="bbRange">&nbsp;</div> 
         <i class="fa {{GetImage(element)}}" /> 
         <div ng-drag="element.ElementType!=='placeholder'" 
          ng-drag-data="element" 
          ng-drag-start="Start()" 
          ng-drag-success="From(element,bigBlock, $index, bigBlock.$index)" 
          ng-drag-stop="Stop(element, bigBlock, $index, bigBlock.$index)" 
          class="cutOff"> 
          {{element.Title}} 
         </div> 
         <div class="edit ng-show="GetLinkText(element, true)"> 
          <span class="isvisible"> 
           <i title="{{element.Present?'Präsentieren':'Nicht präsentieren'}}" class="fa fa-{{element.Present?'eye':'eye-slash'}}"></i> 
          </span> 
          <a href="#" ng-click="Edits.Element(element, true)">{{GetLinkText(element,true)}}</a> 
         </div> 
        </div> 

Voici comment il ressemble: Ceci est tout glisser: Et c'est à quoi ça ressemble quand je simplement ne laissez pas tomber comme décrit ci-dessous:

Je peux maintenant (avec succès) glisser & drop les deux éléments ("Welcome" et "Go Away") à l'intérieur de ce bloc en changeant l'ordre de ces deux. Mais si j'annule le glisser/déposer.

par exemple. Faire glisser "Bienvenue" et ne pas le déplacer vers le bas ou le déplacer vers une zone où je ne peux pas laisser tomber (en dehors du bloc) le texte "Bienvenue" disparaît.

Il n'y a aucune erreur. La chute ne vient pas (comme prévu), mais Angular semble être incapable de réafficher le texte de cet élément. ({{element.Title}})

Un événement I a essayé de forcer une actualisation en utilisant $ apply(), mais cela n'a rien changé (ne créant pas non plus d'erreur).

Toutefois, si je fais quelque chose sur la page, comme en cliquant sur un bouton d'édition ou toute autre chose qui provoque un événement, la date est à nouveau affichée correctement. Par conséquent, cela ressemble à un problème d'actualisation pour moi.

J'utilise ngDraggable pour cette (https://github.com/fatlinesofcode/ngDraggable)

(Mise à jour: Analyse de la source de la page dans Developer Console de Chrome le texte semble encore être là et même "devrait" être visible (display: block), donc cela peut être plus un problème de navigateur (chrome) qu'un problème angulaire)

Answer 1

Cela semble être un pur problème de navigateur/CSS et non un problème angulaire. Je résolu ce problème en forçant le navigateur pour rafraîchir le conteneur parent:

$('.mm-Right')[0].style.display = 'none'; 
$('.mm-Right')[0].offsetHeight; 
$('.mm-Right')[0].style.display = 'block'; 

où ma structure est

<div class='mm-Right'> 
<div class='singleBlockElement>[..]</div> 
<div class='singleBlockElement>[..]</div> 
<div class='singleBlockElement>[..]</div> 
</div> 

Ce ne résoudre le problème, mais ressemble à la tricherie pour moi. Je préférerais que ce bug n'apparaisse même pas au lieu de cacher les symptômes. Je suis donc heureux d'accepter une meilleure réponse à ce problème.