Il modo migliore (più efficiente) per mostrare il menu delle opzioni dinamiche in angularjs

Question

Diciamo che abbiamo molti elementi nell'interfaccia utente. Quando un utente fa clic su un elemento, l'interfaccia utente dovrebbe presentare una/dialiog/elemento comparsa sovrapposizione con alcune opzioni, azioni, ecc

Attualmente vedo due opzioni:

1. duplicare l'elemento di sovrapposizione per ogni voce e nascondilo fino a quando non viene cliccato l'elemento associato. Come in questo violino: http://jsfiddle.net/urPww/1/

   <div ng-show="currentItem"> showing options for: {{currentItem.name}} </div> <li ng-repeat="item in items" ng-click="showOptions(item)"> {{item.name}} </li>

2. Luogo sovrapposizione UI una volta e tenere traccia voce wich stato cliccato scorso. Demo: http://jsfiddle.net/aVnPT/5/

   <li ng-repeat="item in items" ng-click="showOptions(item)"> {{item.name}} <span ng-show="item.showingOptions"> <br/>showing options for: {{item.name}} </span> </li>

La prima soluzione non è efficace. Eppure non riesco a capire in modo pulito come mostrare l'overlay dell'interfaccia utente oltre all'elemento cliccato nella seconda. Qualche idea?

Answer 1

È possibile utilizzare un singolo elemento passando $event come parametro per la funzione ng-click. Poi si può ottenere la posizione di clic del mouse Relativo al documento

app.directive('container', function() { 

    var offset = { 
     left: 40, 
     top: -20 
    } 
    return function (scope, element, attributes) { 
     var $oLay = angular.element(document.getElementById('overlay')) 

     scope.showOptions = function (item,$event) {  
      var overlayDisplay; 
      if (scope.currentItem === item) { 
       scope.currentItem = null; 
       overlayDisplay='none' 
      }else{ 
       scope.currentItem = item; 
       overlayDisplay='block' 
      } 

      var overLayCSS = { 
       left: $event.clientX + offset.left + 'px', 
       top: $event.clientY + offset.top + 'px', 
       display: overlayDisplay 
      } 

      $oLay.css(overLayCSS) 
     } 
    } 
}); 

non sono sicuro se angolare normalizza clientX e clientY il modo jQuery fa per diversi browser. Non tutti i browser utilizzano la stessa convenzione per le proprietà delle posizioni degli eventi Sono stati rimossi ng-show dall'elemento di sovrapposizione in modo che gli attributi di stile possano essere controllati dalla direttiva, non dal compilatore angolare a causa dei tempi e dato un id.

DEMO: http://jsfiddle.net/jJyTf/

Answer 2

L'opzione 2 potrebbe funzionare con una direttiva che posiziona dinamicamente le opzioni sovrapposte accanto all'elemento su cui si fa clic utilizzando la manipolazione dom (vedere la risposta di @ charlietfl). Si finisce con HTML più semplice, ma con codice js/angolare molto più complicato.

Tuttavia, ritengo che l'opzione 1 sia l'idea giusta e possa essere pulita un po '. Si può sbarazzarsi della direttiva, e avere un metodo di controllo più semplice:

$scope.showOptions = function(item) { 
    $scope.currentItem = item; 
} 

vedere qui:

http://jsfiddle.net/qxF3A/3/

sarò contento di aggiungere alcuni doppioni (minima) a mio avviso/modello se semplifica notevolmente i miei controller ed evita la necessità di una direttiva personalizzata.