anglejsの動的オプションメニューを表示するための最良の（最も効率的な）方法

Question

UIに多くの項目があるとします。ユーザーがアイテムをクリックすると、UIはいくつかのオプション、アクションとポップアップ/ dialiog /オーバーレイ要素を提示しなければならないと

は現在、私は2つのオプションが表示さなど：

1. は、各項目のオーバーレイ要素を複製します関連する項目がクリックされるまで非表示にします。このフィドルのように：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一度キープトラックウィッヒ項目が最後にクリックされました。デモ：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>

最初のソリューションは、効率的ではありません。しかし、私は、2番目の要素のクリックされた要素のほかにオーバーレイUIを表示する方法を明確に理解することはできません。何か案は？

Answer 1

ng-click関数には、$eventをパラメータとして渡すことで、1つの要素を使用できます。その後

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

を文書化するためにマウスクリックの位置を取得することができ、角度は、jQueryの異なるブラウザの場合とclientXとclientY方法を標準化するかどうかわからないです。すべてのブラウザがイベント位置プロパティに対して同じ規則を使用しているわけではありません。オーバーレイ要素からng-showを削除しました。したがって、スタイル属性はタイミングのため角度コンパイラではなくディレクティブから制御できます。ので、私は、コントローラ内のUIロジックを入れないようしたいと思い、私が働いているプロジェクトの複雑さのhttp://jsfiddle.net/jJyTf/

Answer 2

オプション2 は、dom操作（@ charlietflの回答を参照）を使用して、クリックされた要素の横にオプションオーバーレイを動的に配置する指示文で動作します。よりシンプルなHTMLになりますが、はるかに複雑なjs /角度コードになります。

しかし、私はオプション1は正しいアイデアだと思うし、ちょうど少しきれいにすることができます。ここを参照してください

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

：あなたはディレクティブを取り除き、と簡単なように、コントローラのメソッドを持って得ることができます

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

を私は喜んで/私の見解では、いくつかの（最低限の）重複を追加しますコントローラを大幅に簡素化し、カスタムディレクティブの必要性を避けるなら、テンプレート