在angularjs中显示动态选项菜单的最佳(最有效)方式

Question

假设我们在UI中有很多项目.当用户单击某个项目时,UI应该显示一个弹出/拨号/覆盖元素,其中包含一些选项,操作等.

目前我看到两个选项:

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>

第一种解决方案效率不高.然而,除了第二个中单击的元素之外,我无法弄清楚如何显示叠加UI.有任何想法吗？

Answer 1

您可以通过将单个元素$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以及clientYjQuery 对不同浏览器的处理方式。并非所有浏览器都对事件位置属性使用相同的约定已从覆盖元素中删除ng-show，因此可以通过指令控制其样式属性，而不是由于时间原因由角度编译器控制，并给它一个 id。

演示： http: //jsfiddle.net/jJyTf/