Beste (effizienteste) Möglichkeit, dynamische Optionen in angularjs anzuzeigen

Question

Nehmen wir an, wir haben viele Elemente in der Benutzeroberfläche. Wenn ein Benutzer auf ein Element klickt, sollte die UI präsentiert ein Popup/dialiog/Overlay-Element mit einigen Optionen, Aktionen und usw.

Derzeit sehe ich zwei Möglichkeiten:

1. für jedes Element des Overlay Element duplizieren und verstecke es, bis der zugehörige Gegenstand angeklickt wird. Wie in dieser Geige: 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. Platz Overlay UI einmal und halten wurden Spur weichen Artikel zuletzt angeklickt. 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>

Die erste Lösung ist nicht effizient. Dennoch kann ich keinen sauberen Weg finden, Overlay-UI neben dem angeklickten Element im zweiten anzuzeigen. Irgendwelche Ideen?

Answer 1

Sie können ein einzelnes Element verwenden, indem Sie $event als Parameter an Ihre ng-click-Funktion übergeben. Dann kann Position Mausklick relativ bekommen zu dokumentieren

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

nicht sicher ist, ob Winkel normalisieren clientX und clientY den Weg jQuery für verschiedenen Browser tut. Nicht alle Browser verwenden dieselbe Konvention für Ereignispositionseigenschaften. ng-show wurde aus dem Überlagerungselement entfernt, so dass die Stilattribute aufgrund des Timings von der Anweisung und nicht von dem Angular Compiler gesteuert werden können und eine ID erhalten.

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

Answer 2

Option 2 könnte mit einer Direktive arbeiten, die das Options-Overlay dynamisch neben dem angeklickten Element platziert, indem Dom-Manipulation verwendet wird (siehe @ charlietfls Antwort). Sie haben am Ende einfacheren HTML-Code, aber viel komplizierteren js/eckigen Code.

Aber ich denke, Option 1 ist die richtige Idee, und kann nur ein wenig aufgeräumt werden. Sie können die Richtlinie loszuwerden, und eine Controller-Methode so einfach haben wie:

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

Siehe hier:

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

Ich werde gerne einig (minimal) Vervielfältigung in meiner Sicht hinzufügen/Vorlage, wenn es meine Controller erheblich vereinfacht und die Notwendigkeit für eine benutzerdefinierte Direktive vermeidet.