Question

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

目前我看到两个选项：

复制每个项目的叠加元素并将其隐藏，直到单击关联的项目。喜欢这个小提琴：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>
放置覆盖用户界面一次并跟踪最后点击的项目。演示：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)
        }
    }
});

我不确定角度是否会使jQuery对不同浏览器的方式标准化为clientX和clientY。并非所有浏览器都使用相同的事件位置属性约定已从overlay元素中删除ng-show，因此它的样式属性可以从指令控制，而不是由角度编译器控制，因为它是一个id。

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

Answer 2

选项2 可以使用指令，该指令使用dom操作动态地将选项覆盖在被点击的元素旁边（请参阅@ charlietfl的答案）。最终会得到更简单的HTML，但更复杂的js / angular代码。

但是我认为选项1是正确的想法，可以稍微清理一下。您可以删除该指令，并使用一个简单的控制器方法：

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

见这里：

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

如果它大大简化了我的控制器并避免了对自定义指令的需要，我很乐意在我的视图/模板中添加一些（最小的）重复。

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

2 个答案: