6

假设我们在 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。有任何想法吗？

4

2 回答 2

2

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

Am not sure if angular normalizes clientX and clientY the way jQuery does for different browsers. Not all browsers use same convention for event position properties Have removed ng-show from overlay element so it's style attributes can be controlled from directive, not by angular compiler due to timing, and given it an id.

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

于 2013-04-10T16:07:18.900 回答
0

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

但是我认为选项 1 是正确的想法，可以稍微清理一下。您可以摆脱指令，并拥有一个简单的控制器方法：

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

看这里：

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

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

于 2013-04-10T14:52:30.727 回答