Cách tốt nhất (hiệu quả nhất) để hiển thị menu tùy chọn động trong angularjs

Question

Giả sử chúng ta có nhiều mục trong giao diện người dùng. Khi người dùng nhấp một mục, giao diện người dùng nên trình bày một/dialiog/yếu tố lớp phủ popup với một số tùy chọn, hành động và vv

Hiện nay tôi thấy hai lựa chọn:

1. Duplicate yếu tố lớp phủ cho từng hạng mục và ẩn nó cho đến khi mục được liên kết được nhấp. Giống như trong fiddle này: 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. UI Nơi overlay một lần và giữ mục Mà theo dõi được nhấp cuối cùng. 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>

Các giải pháp đầu tiên là không hiệu quả. Tuy nhiên, tôi không thể tìm ra một cách rõ ràng cách hiển thị giao diện người dùng lớp phủ bên cạnh phần tử được nhấp trong phần tử thứ hai. Bất kỳ ý tưởng?

Answer 1

Bạn có thể sử dụng một phần tử đơn lẻ bằng cách chuyển trong $event làm thông số cho hàm ng-click của bạn. Sau đó có thể có được vị trí của con chuột nhấp chuột liên quan đến tài liệu

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

Am không chắc chắn nếu góc bình thường hóa clientX và clientY cách jQuery làm cho các trình duyệt khác nhau. Không phải tất cả các trình duyệt đều sử dụng cùng một quy ước cho các thuộc tính vị trí sự kiện Đã loại bỏ ng-show khỏi phần tử lớp phủ sao cho thuộc tính phong cách có thể được kiểm soát từ chỉ thị, chứ không phải bởi trình biên dịch góc do thời gian và cho nó một id.

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

Answer 2

Tùy chọn 2 có thể làm việc với chỉ thị tự động đặt lớp phủ tùy chọn cùng với phần tử được nhấp bằng thao tác dom (xem câu trả lời của @ charlietfl). Bạn kết thúc với HTML đơn giản hơn, nhưng mã js/góc phức tạp hơn nhiều.

Tuy nhiên tôi nghĩ tùy chọn 1 là ý tưởng phù hợp và chỉ có thể được làm sạch một chút. Bạn có thể thoát khỏi những chỉ thị, và có một phương pháp điều khiển đơn giản như:

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

Xem ở đây:

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

tôi sẽ sẵn sàng thêm một số trùng lặp (tối thiểu) trong quan điểm của tôi/mẫu nếu nó đơn giản hóa rất nhiều bộ điều khiển của tôi và tránh sự cần thiết cho một chỉ thị tùy chỉnh.