在angularjs中顯示動態選項菜單的最佳（最有效）方法

假設我們在UI中有很多項目。當用戶點擊一個項目，用戶界面呈現彈出/ dialiog /覆蓋元素與一些選項，動作等在angularjs中顯示動態選項菜單的最佳（最有效）方法

目前我看到兩個選項：

重複覆蓋件的每個項目並隱藏它直到關聯的項目被點擊。如在此琴：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>
將覆蓋UI一次跟蹤至極項目是最後點擊。演示：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>

第一個解決方案是效率不高。然而，我無法想出一個乾淨的方式，除了第二個單擊的元素之外，如何顯示疊加式UI。有任何想法嗎？

2013-04-10 package

通過將$event作爲參數傳遞給ng-click函數，可以使用單個元素。然後可以得到相對的點擊鼠標的位置記錄

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

我不知道，如果角度規範化clientX和clientY jQuery也爲不同瀏覽器的方式。並非所有瀏覽器對事件位置屬性都使用相同的約定從疊加元素中刪除ng-show，因此它的樣式屬性可以由指令控制，而不是由角度編譯器控制，因爲定時，並給它一個id。

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

來源

2013-04-10 16:07:18 charlietfl

選項2 可能使用一個指令，使用dom操作動態地將選項疊加在單擊的元素旁邊（請參閱@ charlietfl的答案）。你最終得到更簡單的HTML，但更復雜的JS /角碼。

但是我認爲選項1是正確的想法，可以稍微清理一下。你可以擺脫的指令，並且有一個控制器方法簡單：

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

在這裏看到：

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

我會很樂意在我看來，增加一些（最小）複製/模板，如果它大大簡化了我的控制器，並避免了自定義指令的需要。

來源

2013-04-10 14:52:30 jszobody

因爲我的工作，我想避免把UI邏輯控制器中的項目的複雜性。無論如何，感謝您的意見。 – package 2013-04-11 06:00:07

在angularjs中顯示動態選項菜單的最佳（最有效）方法

回答

相關問題